el-form + el-table,表格各单元格内嵌el-form-item项,怎么添加校验
时间: 2023-09-29 08:09:33 浏览: 126
el-table嵌套 el-form并且加正则校验
要在el-form + el-table中每个单元格内嵌el-form-item项,并且需要添加校验功能,可以按照以下步骤操作:
1. 在el-form-item中添加需要校验的表单控件,如el-input、el-select等。
2. 在el-form-item中添加校验规则,可以通过rules属性来添加校验规则,如:
```
<el-form-item prop="name" label="姓名" :rules="nameRules">
<el-input v-model="form.name"></el-input>
</el-form-item>
```
在data中定义nameRules数组对象:
```
data() {
return {
form: {
name: ''
},
nameRules: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 10, message: '长度在2到10个字符', trigger: 'blur' }
]
}
}
```
这里定义了两个校验规则,第一个规则要求该字段不能为空,第二个规则要求该字段长度在2到10个字符之间。
3. 在el-table中添加slot-scope,用于获取每个单元格的数据。如:
```
<el-table :data="tableData">
<el-table-column label="姓名">
<template slot-scope="{ row }">
<el-form-item prop="name" :rules="nameRules">
<el-input v-model="row.name"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
```
这里通过slot-scope获取到每个单元格的数据,并将数据绑定到el-input中。同时在el-form-item中添加了校验规则。
4. 在methods中定义表单提交的方法,并调用el-form的validate方法对表单进行校验。如:
```
methods: {
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
// 校验通过,提交表单
} else {
// 校验不通过,提示错误信息
}
});
}
}
```
这里通过this.$refs.form.validate方法对表单进行校验,如果校验通过,则提交表单;如果校验不通过,则提示错误信息。
以上就是在el-form + el-table中添加校验的方法,希望能够帮到你。
阅读全文