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

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

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>

本文由博客一文多发平台 OpenWrite 发布!

http://www.lryc.cn/news/437994.html

相关文章:

  • 模板与泛型编程笔记(一)入门篇
  • 浅谈WebApi
  • 9月14日,每日信息差
  • 无人机控制与三维AI感知处理平台正式上线!
  • 9.11-kubeadm方式安装k8s
  • 限流,流量整形算法
  • 【C++知识扫盲】------C++ 中的引用入门
  • 【机器学习】6 ——最大熵模型
  • 小程序——生命周期
  • 基于微信小程序的宠物之家的设计与实现
  • 自定义EPICS在LabVIEW中的测试
  • 基于深度学习的农作物病害检测
  • 【C#】命名规范
  • 超级帐本(Hyperledger)
  • 如何精细优化网站关键词排名:实战经验分享
  • Ruoyi Cloud 本地启动
  • Nginx解析:入门笔记
  • 在 Mac 上安装双系统会影响性能吗,安装双系统会清除数据吗?
  • vue3提交按钮限制重复点击
  • Java | Leetcode Java题解之第395题至少有K个重复字符的最长子串
  • 20240915 每日AI必读资讯
  • 量化交易需要注意的关于股票交易挂单排队规则的问题
  • 应急响应实战---是谁修改了我的密码?
  • 知识的通用性
  • 36岁,大厂女程序员,中年失业后,我开始接受自己的平凡,并深耕自己
  • shader 案例学习笔记之mix函数
  • OpenAI草莓正式发布,命名o1
  • 心觉:以终为始,帮你精准实现目标
  • 【Kubernetes】linux centos安装部署Kubernetes集群
  • canlog-vci can记录仪,速采仪如何用VBDSP进行解析曲线