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

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

1、功能实现图示

2、实现思路

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

3、代码实现

vue 复制代码
<template>
  <div class="list_tree">
    <div class="flex mb10">
      <el-button
        v-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-tree
      ref="treeRef"
      :data="treeData"
      show-checkbox
      node-key="deptId"
      check-strictly
      default-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) {
      // 最终选中的keys
      let setKeysList = [];
      const treeNode = this.$refs.treeRef;
      // 已选中keys
      const 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();
        // 筛选出有子节点的node
        const 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 发布!

相关推荐
百锦再11 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
一笑code16 小时前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
eric*168816 小时前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
喜欢敲代码的程序员1 天前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
海的诗篇_1 天前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
sunbyte1 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
skyymrj11 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue
程序猿小D11 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+Vue实现的校园二手交易平台管理系统,推荐!
java·数据库·mysql·spring·vue·毕业设计·校园二手交易平台
伍哥的传说11 天前
react gsap动画库使用详解之text文本动画
前端·vue.js·react.js·前端框架·vue·html5·动画
伍哥的传说12 天前
react gsap动画库使用详解之scroll滑动动画
前端·javascript·vue.js·react.js·前端框架·vue·动画