在 'el-form'
中使用 'el-table'
,可以通过以下步骤进行必填校验:
1.为 'el-form'
组件设置 'ref'
属性,以便在代码中访问该组件:
<el-form ref="myForm">
<!-- ... -->
</el-form>
2.为 'el-table'
组件设置 'row-key'
属性,并将其绑定到 'el-form'
组件的 model
对象中:
<el-form ref="myForm" :model="form">
<el-table :data="tableData" row-key="id">
<!-- ... -->
</el-table>
</el-form>
在这里,'tableData'
是 'el-table'
的数据源,'id'
是数据源中每一行的唯一标识。
3.为 'el-form'
中的每一个必填项设置 'prop'
属性,以便在校验时进行标识。同时,在每一个必填项中添加 'rules'
属性,用于设置校验规则:
<el-form ref="myForm" :model="form">
<el-table :data="tableData" row-key="id">
<el-table-column label="姓名" prop="name">
<template slot-scope="scope">
<el-form-item :prop="'name-' + scope.$index" :rules="[{ required: true, message: '姓名不能为空' }]">
<span>{{ scope.row.name }}</span>
</el-form-item>
</template>
</el-table-column>
<!-- ... -->
</el-table>
</el-form>
在这里,我们为每一个必填项的 'prop'
属性添加了当前行的索引值,以保证每一行都有一个独立的标识。同时,我们为每一个必填项设置了一个校验规则,要求该项必须填写。
4.在提交表单时,使用 'validate()'
方法进行校验。该方法会返回一个 Promise 对象,如果校验通过,则 resolve(),否则 reject(),并将错误信息传递给 reject() 的回调函数。
this.$refs.myForm.validate((valid) => {
if (valid) {
// 校验通过,执行提交操作
} else {
// 校验失败,提示错误信息
this.$message.error('表单填写不完整,请检查后重新提交!');
}
});
在这里,我们调用 'validate()'
方法,并传入一个回调函数。如果校验通过,则回调函数的参数 'valid'
为 'true'
,否则为 'false'
。如果校验失败,则使用 '$message'
组件提示错误信息。
通过以上步骤,可以实现对 'el-table'
中必填项的校验。