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 发布！