当前位置：首页 > news >正文

el-tree父子不互相关联时，手动实现全选、反选、子级全选、清空功能

news 2025/7/10 20:01:30

el-tree父子不互相关联时，手动实现全选、反选、子级全选、清空功能

1、功能实现图示

在这里插入图片描述

2、实现思路

当属性check-strictly为true时，父子节点不互相关联，如果需要全部选中或选择某一节点下的全部节点就必须手动选择每个节点，十分麻烦。可以通过ref操做el-tree的getCheckedKeys、getCheckedNodes、setCheckedKeys方法手动快速节点选择。

3、代码实现

<template><div class="list_tree"><div class="flex mb10"><el-buttonv-for="item in treeButtonProps"size="mini"type="primary"class="mr5":key="item.treeKey":disabled="item.isDisb ? isdisChildAll : false"@click="onChecked(item.treeKey)">{{ item.text }}</el-button></div><el-treeref="treeRef":data="treeData"show-checkboxnode-key="deptId"check-strictlydefault-expand-all@check-change="checkChange"/></div>
</template><script>
export default {data() {return {// tree数据结构....treeData: [{deptId: '130200',label: '河北省/唐山市',pid: null,regionCode: '130200',type: '1',topId: null,children: [{deptId: '13020001',label: '唐山教育局',pid: '130200',regionCode: '130200',type: '2',topId: '130200',children: [{deptId: '130200001',label: '唐山初级中学校',pid: '13020001',regionCode: '130200',type: '2',children: null,topId: '130200'},{deptId: '130200002',label: '唐山市初级二中',pid: '13020001',regionCode: '130200',type: '2',children: null,topId: '130200'}]}]}/// more-data.......],isdisChildAll: false,treeKeysList: [],treeButtonProps: [{ text: '全选', isDisb: false, treeKey: 'all' },{ text: '反选', isDisb: false, treeKey: 'reverse' },{ text: '子级全选', isDisb: true, treeKey: 'childAll' },{ text: '清空', isDisb: false, treeKey: 'clear' }]};},methods: {// 获取树所有key集合getTreeKeys() {this.treeKeysList = [];const treeData = deepClone(this.treeData);while (treeData.length > 0) {const item = treeData.pop();this.treeKeysList.push(item.deptId);if (item.children && item.children.length > 0) {treeData.push(...item.children);}}},// 设置子级全选是否禁用checkChange(data, checked) {// 没有选中含有子级节点时禁用if (checked) {this.isdisChildAll = !(data.children && data.children.length > 0);} else {this.isdisChildAll = true;}},// 全选、反选、子级全选、清空onChecked(type) {// 最终选中的keyslet setKeysList = [];const treeNode = this.$refs.treeRef;// 已选中keysconst checkedKeys = treeNode.getCheckedKeys();if (type == 'clear') {setKeysList = [];}if (type == 'all') {setKeysList = this.treeKeysList;}if (type == 'reverse') {// 未选中keys集合setKeysList = this.treeKeysList.filter(item => checkedKeys.indexOf(item) == -1);}if (type == 'childAll') {setKeysList = checkedKeys;// 目前被选中的节点所组成的数组const checkNodes = treeNode.getCheckedNodes();// 筛选出有子节点的nodeconst hasChildNodes = checkNodes.filter(item => item.children && item.children.length > 0);// 循环遍历出子节点集合while (hasChildNodes.length > 0) {const item = hasChildNodes.pop();setKeysList.push(item.deptId);if (item.children && item.children.length > 0) {hasChildNodes.push(...item.children);}}}// 设置节点选中状态treeNode.setCheckedKeys(setKeysList);}}
};
</script>