vue.js 前端 ElementUI el-form 组合el-table如何做必填校验

在 'el-form' 中使用 'el-table'，可以通过以下步骤进行必填校验：

1.为 'el-form' 组件设置 'ref' 属性，以便在代码中访问该组件：

2.为 'el-table' 组件设置 'row-key' 属性，并将其绑定到 'el-form' 组件的 model 对象中：

在这里，'tableData' 是 'el-table' 的数据源，'id' 是数据源中每一行的唯一标识。

3.为 'el-form' 中的每一个必填项设置 'prop' 属性，以便在校验时进行标识。同时，在每一个必填项中添加 'rules' 属性，用于设置校验规则：

在这里，我们为每一个必填项的 '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' 中必填项的校验。

参考链接

 您阅读本篇文章共花了：