el-table是树的时候多选只选自己
时间: 2023-10-14 18:32:47 浏览: 77
如果您想要在 `el-table` 的树形结构中实现多选时只选自己的效果,可以在 `check-change` 事件中手动过滤掉子节点,只保留自己。
具体而言,您可以在 `check-change` 事件中,使用 `Array.prototype.filter()` 方法过滤掉所有拥有子节点的节点。过滤的条件可以是该节点的 `children` 属性是否存在或者长度是否为 0。过滤后,只保留没有子节点的节点,即只选自己。
下面是一个示例代码,展示了如何在 `el-table` 的树形结构中实现多选时只选自己的效果:
```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) {
// 过滤掉所有拥有子节点的节点,只保留自己
checkedNodes = checkedNodes.filter(node => !node.children || node.children.length === 0);
this.checkedNodes = checkedNodes;
},
},
};
</script>
```
在上面的示例中,我们在 `check-change` 事件中使用 `Array.prototype.filter()` 方法过滤掉所有拥有子节点的节点,然后将过滤后的结果赋值给 `checkedNodes` 变量。需要注意的是,如果您的树形结构中某些节点的 `children` 属性为 `null`,则需要将过滤条件修改为 `!node.children || node.children.length === 0`。
阅读全文