vue表单嵌套table 校验
时间: 2023-10-02 16:13:28 浏览: 125
对于Vue表单嵌套table校验,可以考虑使用自定义校验规则来实现。
首先,需要在表单中添加自定义校验规则:
```html
<el-form :model="form" :rules="rules">
<el-table :data="tableData">
<!-- 表格列定义 -->
</el-table>
</el-form>
```
```javascript
data() {
return {
form: {},
tableData: [],
rules: {
nestedTable: [
{
validator: (rule, value, callback) => {
// 对嵌套表格的数据进行校验
// 如果校验失败,调用 callback 提示错误信息
},
trigger: 'blur'
}
]
}
}
}
```
然后,在嵌套表格的数据中添加校验规则:
```html
<el-table-column label="嵌套表格">
<template slot-scope="scope">
<el-form :model="scope.row" :rules="nestedRules">
<!-- 嵌套表格列定义 -->
</el-form>
</template>
</el-table-column>
```
```javascript
data() {
return {
nestedRules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' }
]
}
}
}
```
这样就可以实现嵌套表格的校验了。当进行表单提交时,会自动触发校验规则,并提示校验错误信息。
阅读全文