el-table 树型表格 children 无法匹配prop值 进行el-form校验
可能是因为 el-table 的 children 参数是一个数组,而 el-form 的 prop 值是一个字符串。如果想要进行 el-form 校验,可以在 el-table 的每个子节点中添加一个隐藏的 input 标签,并设置其 value 值为当前节点的相关信息,如下所示:
<el-table :data="treeData">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
<el-table-column label="操作">
<template slot-scope="{row}">
<el-form ref="form" :model="row" :rules="rules" :key="row.id">
<input type="hidden" :value="JSON.stringify(row)" name="treeNode">
<el-form-item prop="name">
<el-input v-model="row.name"></el-input>
</el-form-item>
<el-form-item prop="age">
<el-input v-model="row.age"></el-input>
</el-form-item>
<el-form-item prop="gender">
<el-radio-group v-model="row.gender">
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</template>
</el-table-column>
</el-table>
然后在 el-form 触发校验时,可以通过表单的 submit 方法获取到每个隐藏的 input 标签的值,进而获取到每个节点的相关信息,进行校验操作。具体代码如下:
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
const treeNodes = []
const inputs = document.querySelectorAll('input[name="treeNode"]')
for (let i = 0; i < inputs.length; i++) {
treeNodes.push(JSON.parse(inputs[i].value))
}
console.log(treeNodes)
// 校验通过,进行提交操作
} else {
// 校验不通过,进行错误提示
}
})
}
}
``
原文地址: http://www.cveoy.top/t/topic/hmoC 著作权归作者所有。请勿转载和采集!