el-tree默认全选
时间: 2023-10-05 11:14:59 浏览: 119
el-tree-selected-tree
el-tree 默认是不全选的,需要手动设置 `node-key` 和 `default-checked-keys` 属性来实现全选。例如:
```html
<template>
<el-tree
:data="data"
:node-key="nodeKey"
:default-checked-keys="defaultCheckedKeys"
show-checkbox
default-expand-all
></el-tree>
</template>
<script>
export default {
data() {
return {
data: [
{
id: 1,
label: '一级 1',
children: [
{
id: 4,
label: '二级 1-1',
},
{
id: 5,
label: '二级 1-2',
},
],
},
{
id: 2,
label: '一级 2',
children: [
{
id: 6,
label: '二级 2-1',
},
{
id: 7,
label: '二级 2-2',
},
],
},
{
id: 3,
label: '一级 3',
children: [
{
id: 8,
label: '二级 3-1',
},
{
id: 9,
label: '二级 3-2',
},
],
},
],
nodeKey: 'id',
defaultCheckedKeys: [1, 2, 3, 4, 5, 6, 7, 8, 9],
};
},
};
</script>
```
在这个例子中,我们设置了 `node-key` 为 `id`,并且设置了 `default-checked-keys` 为所有节点的 `id` 值,这样就实现了全选。同时,我们需要设置 `show-checkbox` 属性来显示复选框。
阅读全文