el-tree增加全选
时间: 2023-11-10 13:07:35 浏览: 101
el-tree中增加全选功能可以通过以下步骤实现:
1. 在el-tree中添加一个checkbox,用于全选/反选所有节点。
2. 监听checkbox的change事件,根据选中状态来设置所有节点的选中状态。
3. 在el-tree中添加一个方法,用于设置所有节点的选中状态。
4. 在全选/反选时调用该方法,实现全选/反选功能。
以下是示例代码:
```
<template>
<el-tree
ref="tree"
:data="data"
:props="defaultProps"
node-key="id"
show-checkbox
@check-change="handleCheckChange"
>
<template v-slot="{ node, data }">
<span>{{ node.label }}</span>
<el-checkbox v-model="data.checked" @change.stop></el-checkbox>
</template>
</el-tree>
</template>
<script>
export default {
data() {
return {
data: [], // 树形数据
defaultProps: {
children: 'children',
label: 'label'
},
checkAll: false // 全选状态
}
},
mounted() {
// 初始化数据
this.data = [
{
id: 1,
label: '节点1',
children: [
{
id: 2,
label: '节点1-1'
},
{
id: 3,
label: '节点1-2'
}
]
},
{
id: 4,
label: '节点2',
children: [
{
id: 5,
label: '节点2-1'
},
{
id: 6,
label: '节点2-2'
}
]
}
]
},
watch: {
checkAll(newVal) {
// 全选/反选所有节点
this.$refs.tree.setCheckedKeys(newVal ? ['1', '2', '3', '4', '5', '6'] : [])
}
},
methods: {
handleCheckChange() {
// 判断是否全选
const checkedNodes = this.$refs.tree.getCheckedNodes()
const allNodes = this.$refs.tree.getTree().data
this.checkAll = checkedNodes.length === allNodes.length
}
}
}
```
阅读全文