el-table 树形结构中多个 children 表单的必填校验
在 el-table 树形结构中,如果存在多个 children 表单,需要进行必填校验,可以通过以下步骤实现:
-
使用 el-table 的 expand-row-keys 属性来展开所有数据行,包括 children 表单。
-
在 el-form 中使用 v-for 循环渲染多个 children 表单,并为每个表单设置一个唯一的 ref 属性。
-
在 el-form 中使用 el-form-item 标签包裹每个表单项,并为每个表单项设置一个唯一的 prop 属性。
-
使用 el-form 的 validate 方法进行表单校验,可以通过第二个参数传入一个 validator 函数,该函数接收一个参数,表示当前表单的 ref。
-
在 validator 函数中,使用 $refs 获取当前表单的所有 el-form-item 组件,并遍历校验每个表单项是否填写。
-
如果有任何一个表单项未填写,则返回一个错误信息。否则返回 true,表示校验通过。
以下是示例代码:
<el-table :data="tableData" :expand-row-keys="expandedKeys">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column label="Children">
<template slot-scope="{ row }">
<el-form :ref="'form-' + row.id" :model="row" :rules="rules" inline>
<el-form-item label="Name" prop="name">
<el-input v-model="row.name"></el-input>
</el-form-item>
<el-form-item label="Age" prop="age">
<el-input v-model.number="row.age"></el-input>
</el-form-item>
</el-form>
</template>
</el-table-column>
</el-table>
<script>
export default {
data() {
return {
tableData: [
{
id: 1,
name: 'John',
age: 20,
children: [
{
id: 2,
name: '',
age: null
},
{
id: 3,
name: 'Bob',
age: 18
}
]
}
],
expandedKeys: [1],
rules: {
name: [
{ required: true, message: 'Name is required' }
],
age: [
{ required: true, message: 'Age is required' }
]
}
}
},
methods: {
validateForm() {
for (const row of this.tableData) {
const form = this.$refs['form-' + row.id][0]
if (form) {
if (!form.validate()) {
return false
}
}
}
return true
},
submitForm() {
if (this.validateForm()) {
// submit form data
}
}
}
}
</script>
``
原文地址: https://www.cveoy.top/t/topic/hlnu 著作权归作者所有。请勿转载和采集!