el-table 树型表格 children中的input 无法匹配prop值 进行el-form校验
如果您想要对树型表格中的children节点中的input进行el-form校验,可以采用以下方法:
- 在树型表格的columns中定义一个scoped slot,用于渲染children节点的input,并将其v-model绑定到相应的数据属性上。例如:
<el-table-column label="名称">
<template slot-scope="{ row }">
<div v-if="row.children">
<el-form-item v-for="(child, index) in row.children" :key="index" :prop="'children.' + index + '.name'" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
<el-input v-model="child.name"></el-input>
</el-form-item>
</div>
<div v-else>
{{ row.name }}
</div>
</template>
</el-table-column>
- 在树型表格的data中定义一个rules对象,用于存放校验规则。例如:
data() {
return {
data: [
{
name: '父节点1',
children: [
{ name: '子节点1' },
{ name: '子节点2' }
]
},
{
name: '父节点2',
children: [
{ name: '子节点3' },
{ name: '子节点4' }
]
}
],
rules: {
children: [
{
type: 'array',
required: true,
message: '请至少输入一个子节点',
trigger: 'blur'
}
]
}
}
}
- 在el-form中使用该rules对象进行校验。例如:
<el-form :model="data" :rules="rules" ref="form">
<el-table :data="data" highlight-current-row>
// 定义树型表格的columns和scoped slot
</el-table>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
- 在提交表单时,使用this.$refs.form.validate方法进行校验。例如:
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
console.log('校验通过')
} else {
console.log('校验失败')
}
})
}
}
``
原文地址: http://www.cveoy.top/t/topic/hmov 著作权归作者所有。请勿转载和采集!