VUE3 + Elementui-Plus 之 树形组件el-tree 一键展开(收起);一键全选(不全选)

需求: 产品要求权限树形结构添加外部复选框进行全部展开或收起;全选或不全选。

实现步骤:

tree组件部分:

javascript 复制代码
<div class="role-handle">
   <div>权限选择(可多选)</div>
   <div>
     <el-checkbox v-model="expandAll" @change="toggleExpandAll"> 展开/折叠 </el-checkbox>

     <el-checkbox v-model="checkAll" @change="handleCheckAllChange"> 全选/全不选 </el-checkbox>
   </div>
 </div>
<el-tree
   ref="treeRef"
   node-key="code"
   show-checkbox
   v-loading="loading"
   element-loading-text="权限资源加载中..."
   class="el-tree"
   :indent="12"
   :data="treeData"
   :props="defaultProps"
   :highlight-current="true"
   :default-expand-all="false"
   :expand-on-click-node="false"
   :default-checked-keys="menuIds"
   :default-expanded-keys="expandedKeys"
   @check="handleCheckChange"
 />

ts部分:

javascript 复制代码
const checkAll: any = ref(false);
const expandAll: any = ref(false);
//略去其他变量;可查看文档自行配置
// 展开
const toggleExpandAll = (type: any) => {
  expandAll.value = type;
  if (type) {
    Object.values(treeRef.value.store.nodesMap).forEach((v: any) => v.expand());
    return;
  }
  Object.values(treeRef.value.store.nodesMap).forEach((v: any) => v.collapse());
};
// 全选
const handleCheckAllChange = (val: any) => {
  setCheckedRecursive(treeData.value, val);
};
const setCheckedRecursive = (nodes: any, checked: any) => {
  for (const node of nodes) {
    treeRef.value.setChecked(node.code, checked);
    if (node.child && node.child.length > 0) {
      setCheckedRecursive(node.child, checked);
    }
  }
};

页面效果:
默认状态

展开状态

折叠状态

全选状态

全不选状态

注意:以上方法会展开或折叠所有节点;全选或全不选节点。
问题:数据量过大以上操作会有明显卡顿;有高效解决方法的朋友可以交流。

相关推荐
DN金猿14 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子15 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远6627 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_40 分钟前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue1 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
장숙혜1 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang2 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
某公司摸鱼前端2 小时前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信