el-table是树的时候多选不会选下级
时间: 2023-10-14 13:32:47 浏览: 75
vue3 el-table多级表头收缩扩展的实现(JS原味版)
当 `el-table` 是树形结构时,多选不会选择子节点,这是因为默认情况下,`el-table` 对于树形结构的行,只会将父节点作为一行数据进行处理,而子节点是不会被包含在数据中的。因此,多选时也只会选择父节点,而不会选择子节点。
如果您想要实现多选时同时选择子节点,可以通过自定义 `el-table` 的 `tree-props` 属性来实现。`tree-props` 属性是一个对象,用于配置关于树形数据的一些属性,包括父节点字段名、子节点字段名、根节点值等。
具体而言,您可以在 `tree-props` 中设置 `children` 属性为子节点字段名,然后在 `check-change` 事件中递归处理子节点的选中状态,以实现同时选择子节点的效果。
下面是一个示例代码,展示了如何实现多选时同时选择子节点:
```html
<template>
<el-table :data="tableData" :tree-props="{ children: 'children' }" v-model="checkedNodes" @check-change="handleCheckChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="type" label="类型"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '行1', type: '父级', children: [
{ id: 2, name: '行2', type: '子级' },
{ id: 3, name: '行3', type: '子级' }
]},
{ id: 4, name: '行4', type: '父级', children: [
{ id: 5, name: '行5', type: '子级' }
]},
{ id: 6, name: '行6', type: '父级' },
],
checkedNodes: [],
};
},
methods: {
handleCheckChange(checkedNodes) {
// 递归处理选中状态
const handleNode = (node) => {
node.checked = checkedNodes.includes(node);
if (node.children) {
node.children.forEach(child => handleNode(child));
}
};
this.tableData.forEach(row => handleNode(row));
},
},
};
</script>
```
在上面的示例中,我们通过设置 `tree-props` 属性,将子节点字段名设置为 `children`。在 `check-change` 事件中,我们首先递归处理当前节点(包括其子节点)的选中状态,然后再将处理后的结果赋值给 `checkedNodes` 变量。需要注意的是,在树形结构中,如果一个节点被选中,则其所有祖先节点也会被选中。因此,我们无需递归处理祖先节点的选中状态。
阅读全文