概述
在实际开发过程中,我们经常需要处理表格中的表单数据,比如在编辑表格中的某一行数据时进行校验。本文将介绍如何在 Vue3 和 Element Plus 中实现这一功能。
示例代码
<template>
<div>
<el-form ref="formRef" :model="formObj" :rules="rules">
<el-table :data="formObj.list">
<el-table-column label="名称" align="center">
<template #default="scope">
<el-form-item
:prop="'list.' + scope.$index + '.name'"
:rules="[
{ required: true, message: '名称不能为空', trigger: 'blur' },
]"
>
<el-input v-model="scope.row.name" />
</el-form-item>
<el-form-item
:prop="'list.' + scope.$index + '.desc'"
:rules="[
{ required: true, message: '描述不能为空', trigger: 'blur' },
]"
>
<el-input v-model="scope.row.desc" />
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
</div>
</template>
<script setup>
import { ref } from 'vue';
let formObj = ref({
list: [
{
name: '',
desc: ''
}
],
});
const formRef = ref(null);
const rules = {
// 这里不需要单独定义规则,因为已经在模板中指定了
};
// 提交表单
const submitForm = () => {
formRef.value.validate((valid) => {
if (valid) {
console.log('表单提交成功');
// 进行表单提交逻辑
} else {
console.log('表单验证失败');
return false;
}
});
};
</script>
<style>
</style>
分析
1. 定义表单数据
在这个例子中,我们使用了一个名为 formObj
的响应式对象来存储表格的数据。formObj
包含一个名为 list
的数组,数组中的每个元素都代表表格中的一行。
let formObj = ref({
list: [
{
name: '',
desc: ''
}
],
});
2. 表单和表格的结合
在模板中,我们使用 <el-form>
组件包裹整个表格,并将 formObj
作为 model
传入。这意味着整个表单将与 formObj
的数据绑定在一起。
<el-form ref="formRef" :model="formObj" :rules="rules">
<el-table :data="formObj.list">
<!-- 表格列内容 -->
</el-table>
</el-form>
3. 单条数据的校验
为了实现每一条数据的独立校验,我们需要在 <el-form-item>
中指定 prop
属性。这里我们使用模板字符串动态生成 prop
的值,使其能够指向表格中特定行的特定字段。
<el-form-item
:prop="'list.' + scope.$index + '.name'"
:rules="[
{ required: true, message: '名称不能为空', trigger: 'blur' },
]"
>
<el-input v-model="scope.row.name" />
</el-form-item>
4. 提交表单
当用户点击提交按钮时,我们可以通过调用 <el-form>
的 validate
方法来触发表单验证。
const submitForm = () => {
formRef.value.validate((valid) => {
if (valid) {
console.log('表单提交成功');
// 进行表单提交逻辑
} else {
console.log('表单验证失败');
return false;
}
});
};
总结
通过上述方法,我们可以实现在 Vue3 中使用 Element Plus 的 <el-form>
组件嵌套 <el-table>
进行单条数据的表单校验。这在实际项目中非常有用,尤其是需要用户输入大量数据并进行实时验证的场景下。