<template>
  <el-form :model='form' ref='form' label-width='80px'>
    <el-form-item label='姓名' prop='name'>
      <el-input v-model='form.name'></el-input>
    </el-form-item>
    <el-form-item label='年龄' prop='age'>
      <el-input v-model.number='form.age'></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type='primary' @click='submitForm'>提交</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: 0
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log('提交成功')
        } else {
          console.log('提交失败')
          return false
        }
      })
    }
  }
}
</script>
Vue2 Element Plus 简单表单提交代码示例

原文地址: http://www.cveoy.top/t/topic/mzHL 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录