element ui 表单子表加必填
时间: 2023-10-29 20:05:29 浏览: 123
可以通过在子表中的每个表单项上添加 `rules` 属性来实现必填验证。具体实现步骤如下:
1. 在子表中的每个表单项上添加 `rules` 属性,例如:
```html
<el-table-column label="姓名" prop="name">
<template slot-scope="scope">
<el-form-item :prop="'list.' + scope.$index + '.name'" :rules="[{
required: true,
message: '请输入姓名',
trigger: 'blur'
}]">
<el-input v-model="scope.row.name"></el-input>
</el-form-item>
</template>
</el-table-column>
```
2. 在父表单中添加 `rules` 属性,例如:
```html
<el-form :model="form" :rules="rules">
<el-table :data="form.list" style="width: 100%">
<!-- 子表表头 -->
<el-table-column label="子表" prop="list">
<!-- 子表表单项 -->
</el-table-column>
</el-table>
</el-form>
```
```javascript
data() {
return {
form: {
list: [
{ name: '' },
{ name: '' }
]
},
rules: {
list: [
{ required: true, message: '请至少输入一条记录', trigger: 'blur' }
]
}
}
}
```
这样就可以实现在子表中的每个表单项都加上必填验证,并且在父表单中至少输入一条记录的验证。
阅读全文