el-form +el-table,表格中单元格内嵌el-form-item,单元格数量能动态调整,怎么添加校验
时间: 2023-11-05 10:21:15 浏览: 122
要实现这个功能,你需要在 `el-form-item` 中添加校验规则。由于你的单元格数量是动态的,你需要在 `el-table` 数据源中为每个单元格添加一个 `rules` 属性,用于存储对应的校验规则数组。
具体实现步骤如下:
1. 在 `el-table` 中定义一个 `rules` 属性数组,其中每个元素对应一个单元格的校验规则数组。
2. 定义一个方法,用于动态地为每个单元格设置校验规则。在这个方法中,你可以根据单元格的位置和数据源中的索引计算出对应的校验规则数组。
3. 在 `el-form-item` 中使用 `:rules` 绑定对应单元格的校验规则数组即可。
下面是一个示例代码:
```html
<el-form ref="form" :model="formData" :rules="tableRules">
<el-table :data="tableData">
<el-table-column prop="name" label="Name">
<template slot-scope="{ row }">
<el-form-item :rules="getRules(row.index, 'name')">
<el-input v-model="row.name"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="age" label="Age">
<template slot-scope="{ row }">
<el-form-item :rules="getRules(row.index, 'age')">
<el-input v-model="row.age"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
```
```js
export default {
data() {
return {
formData: {},
tableData: [
{ name: 'Alice', age: 20 },
{ name: 'Bob', age: 30 },
],
tableRules: [
[
{ required: true, message: 'Name is required', trigger: 'blur' },
{ min: 3, max: 10, message: 'Name length should be between 3 and 10', trigger: 'blur' },
],
[
{ required: true, message: 'Age is required', trigger: 'blur' },
{ type: 'number', message: 'Age should be a number', trigger: 'blur' },
{ min: 18, max: 60, message: 'Age should be between 18 and 60', trigger: 'blur' },
],
],
};
},
methods: {
getRules(rowIndex, prop) {
return this.tableRules[rowIndex][this.getColumnIndex(prop)];
},
getColumnIndex(prop) {
return this.$refs.table.columns.findIndex((c) => c.property === prop);
},
},
};
```
在这个示例中,我们为 `el-table` 定义了一个 `tableRules` 属性,其中每个元素对应一个单元格的校验规则数组。然后我们在每个 `el-form-item` 中使用 `getRules` 方法动态地获取对应单元格的校验规则数组。最后,在 `getRules` 方法中,我们根据单元格的位置和数据源中的索引计算出对应的校验规则数组。
阅读全文