前端进阶必备 | Vue3 element-plus 表单嵌套表格实现动态表单验证

2023-03-16 20:09:28

在 Vue3 element-plus 中实现表单嵌套表格的动态表单验证：提升用户体验和开发效率

理解表单嵌套表格的动态表单验证

构建交互性强的表单是前端开发中的棘手任务，尤其是涉及嵌套表格时，实现动态表单验证更是难上加难。但借助 Vue3 element-plus，这些难题迎刃而解。动态表单验证指的是在用户输入表单数据时实时进行验证，及时发现不符合要求的数据并给出错误提示。

使用 Vue3 element-plus 实现动态表单验证

首先，在 Vue 实例中引入 element-plus 组件库。然后，使用 element-plus 的 Form 组件作为外层容器，并使用 ref 属性进行引用。在表格中，使用 Table 组件，并在每一行的属性列中使用 FormItem 组件。

在 FormItem 组件中，使用 Input、Select 等表单控件，并使用 rules 属性设置表单验证规则。最后，在 Form 组件中，使用 validate 方法触发表单验证。如果验证失败，可通过 error 属性获取错误信息并显示给用户。

代码示例

<el-form ref="form">
  <el-table>
    <el-table-column prop="name">
      <template slot-scope="scope">
        <el-form-item label="姓名" prop="name" rules={[{ required: true, message: '请输入姓名' }]}>
          <el-input v-model="scope.row.name" />
        </el-form-item>
      </template>
    </el-table-column>
    <el-table-column prop="age">
      <template slot-scope="scope">
        <el-form-item label="年龄" prop="age" rules={[{ required: true, message: '请输入年龄' }]}>
          <el-input v-model="scope.row.age" />
        </el-form-item>
      </template>
    </el-table-column>
  </el-table>
  <el-button @click="submitForm">提交</el-button>
</el-form>

<script>
import { ref } from 'vue'
import { ElForm, ElFormItem, ElTable, ElTableColumn, ElInput, ElButton } from 'element-plus'

export default {
  components: {
    ElForm,
    ElFormItem,
    ElTable,
    ElTableColumn,
    ElInput,
    ElButton
  },
  setup() {
    const form = ref(null)

    const submitForm = () => {
      form.value.validate((valid) => {
        if (valid) {
          // 表单验证通过，提交数据
        } else {
          // 表单验证失败，提示错误信息
          console.log('表单验证失败')
        }
      })
    }

    return {
      form,
      submitForm
    }
  }
}
</script>