el-form嵌套表格并添加校验
时间: 2023-12-22 11:06:26 浏览: 182
要实现 el-form 嵌套表格并添加校验,可以按照以下步骤进行:
1. 在 el-form 中嵌套 el-table 组件,并设置表格的 columns 和 data 属性。
2. 在需要校验的表格列中,使用 scoped slot 的方式自定义表格单元格内容,并在其中添加 el-form-item 组件。
3. 在 el-form-item 中设置需要校验的表单控件,例如 el-input、el-select 等,并设置相应的校验规则。
4. 在 el-form 中使用 ref 属性获取表单的引用,并在需要提交表单时调用表单的 validate 方法进行校验。
以下是一个简单的示例代码:
```html
<template>
<el-form ref="form" :model="formData" :rules="formRules">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名">
<template slot-scope="{ row }">
<el-form-item prop="name">
<el-input v-model="row.name"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="age" label="年龄">
<template slot-scope="{ row }">
<el-form-item prop="age">
<el-input v-model.number="row.age"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form>
</template>
<script>
export default {
data() {
return {
formData: {},
formRules: {
name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
age: [{ required: true, message: '年龄不能为空', trigger: 'blur' }]
},
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 }
]
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 表单校验通过,可以提交表单
}
})
}
}
}
</script>
```
在上述示例中,我们在 el-table 的每一列中使用了 scoped slot,并在其中添加了 el-form-item 组件来实现表单校验。然后,在 el-form 中设置了表单的引用,并在提交按钮的点击事件中调用了表单的 validate 方法来进行表单校验。
阅读全文