el-tree的使用及控制全选、反选、获取选中

组件使用

1. 引入组件，可以参考官网组件引入
2. 参考官网示例写好基础数据结构，不知道怎么转换树形机构的看文章：一维数组转树形

<template><el-treestyle="max-width: 600px":data="data":props="props"show-checkbox/>
</template><script setup>
const handleNodeClick = (data) => {console.log(data)
}const data = [{label: 'Level one 1',children: [{label: 'Level two 1-1',children: [{label: 'Level three 1-1-1',},],},],},{label: 'Level one 2',children: [{label: 'Level two 2-1',children: [{label: 'Level three 2-1-1',},],},{label: 'Level two 2-2',children: [{label: 'Level three 2-2-1',},],},],},{label: 'Level one 3',children: [{label: 'Level two 3-1',children: [{label: 'Level three 3-1-1',},],},{label: 'Level two 3-2',children: [{label: 'Level three 3-2-1',},],},],},
]const props= {children: 'children',label: 'label',
}
</script>

获取选中的id

通过获取tree组件，操作方法进行获取

1. 给组件绑定一个ref

<el-tree ref="treeRef" node-key="id" style="max-width: 600px" :props="props" :data="data" show-checkbox />

2. 声明变量

const treeRef = ref(null)

3. 操作组件方法

// 获取选中数据
const handleCheckChange = () => {// 方法一：获取key，此方法必须设置属性node-key!!!console.log(treeRef.value.getCheckedKeys(false))// 返回被选中的key，也就是id// 方法二：获取节点nodeconsole.log(treeRef.value.getCheckedNodes(false))// 返回被选中的对象
}

全选实现

思路：获取全部的key，也就是id，然后通过赋值的操作来实现效果

// 用于判断是全选还是取消
let isAll = false;
// 全选
const all = () => {if (isAll) {treeRef.value.setCheckedKeys([], false)isAll = false} else {// 获取所以的id，如果有一维数组，则直接循环获取即可const nodeKeys = [];function getAllKeys(data) {data.forEach(node => {nodeKeys.push(node.id);if (node.children) {getAllKeys(node.children);}});}getAllKeys(treeData.value);treeRef.value.setCheckedKeys(nodeKeys, false)isAll = true}
}

反选实现

思路：

1. 获取当前选中的key
2. 全部选中
3. 将第一步获取的key节点设置为取消

// 反选
const reverse = () => {// 1. 获取当前选中的keylet checked = treeRef.value.getCheckedKeys(false);// 2. 全部选中const nodeKeys = [];function getAllKeys(data) {data.forEach(node => {nodeKeys.push(node.id);if (node.children) {getAllKeys(node.children);}});}getAllKeys(treeData.value);treeRef.value.setCheckedKeys(nodeKeys, false)// 3. 将第一步获取的key节点设置为取消checked.forEach(val => {treeRef.value.setChecked(val, false)})
}

全部代码

<template><el-treestyle="max-width: 600px":data="data":props="props"show-checkboxref="treeRef"/><el-button type="primary" @click="handleCheckChange">获取选中数据</el-button><el-button type="primary" @click="all">全选</el-button><el-button type="primary" @click="reverse">反选</el-button>
</template><script setup>
import { ref } from 'vue';
const treeRef = ref(null)
const handleNodeClick = (data) => {console.log(data)
}const data = [{label: 'Level one 1',children: [{label: 'Level two 1-1',children: [{label: 'Level three 1-1-1',},],},],},{label: 'Level one 2',children: [{label: 'Level two 2-1',children: [{label: 'Level three 2-1-1',},],},{label: 'Level two 2-2',children: [{label: 'Level three 2-2-1',},],},],},{label: 'Level one 3',children: [{label: 'Level two 3-1',children: [{label: 'Level three 3-1-1',},],},{label: 'Level two 3-2',children: [{label: 'Level three 3-2-1',},],},],},
]const props= {children: 'children',label: 'label',
}
// 获取选中数据
const handleCheckChange = () => {// 方法一：获取key，此方法必须设置属性node-key!!!console.log(treeRef.value.getCheckedKeys(false))// 返回被选中的key，也就是id// 方法二：获取节点nodeconsole.log(treeRef.value.getCheckedNodes(false))// 返回被选中的对象
}// 用于判断是全选还是取消
let isAll = false;
// 全选
const all = () => {if (isAll) {treeRef.value.setCheckedKeys([], false)isAll = false} else {// 获取所以的id，如果有一维数组，则直接循环获取即可const nodeKeys = [];function getAllKeys(data) {data.forEach(node => {nodeKeys.push(node.id);if (node.children) {getAllKeys(node.children);}});}getAllKeys(treeData.value);treeRef.value.setCheckedKeys(nodeKeys, false)isAll = true}
}// 反选
const reverse = () => {// 1. 获取当前选中的keylet checked = treeRef.value.getCheckedKeys(false);// 2. 全部选中const nodeKeys = [];function getAllKeys(data) {data.forEach(node => {nodeKeys.push(node.id);if (node.children) {getAllKeys(node.children);}});}getAllKeys(treeData.value);treeRef.value.setCheckedKeys(nodeKeys, false)// 3. 将第一步获取的key节点设置为取消checked.forEach(val => {treeRef.value.setChecked(val, false)})
}
</script>