element-ui 树形选择框-多选功能实现

对于树形选择框，网上存在了一大堆，不过好像都是用于单选的，可以多选的倒是没见过。利用工作闲暇之余，零零散散花了有半天左右时间。总的来说，emmm…，好像也不是太难，初等偏上? 废话不多说，直接上代码 注释啥的都挺详细的。实在看不懂可以留言哈

<template>
  <div class="box">
    <el-select
      v-model="selectArr"
      value-key="value"
      placeholder="请选择"
      multiple
      @change="changeSelect"
    >
      <!-- 绑定值为对象形式主要是为了解决相同label引起的报错及后续选中/取消选中失效等一些列问题 -->
      <!-- 方法1. 绑定值为对象时选择器所需要的渲染数据必须使用el-option渲染出来,否则无法在选择器input中渲染 -->
      <!-- 方法2. 可以做个新的选择框来填充数据，将el-select的input覆盖 -->

      <!-- 这里采用的是法1，并设置样式display:none使其隐藏不渲染再页面中 -->
      <el-option
        v-for="item in selectArr"
        :key="item.value"
        :label="item.label"
        :value="item"
        style="display: none"
      >
      </el-option>
      <el-option :value="value">
        <!--
            default-expanded-keys: 默认展开的节点的 key 的数组
            default-checked-keys：默认勾选的节点的 key 的数组 用于有勾选框
            show-checkbox: 节点是否可被选择
            node-click: 节点被点击时的回调 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
            current-change: 当前选中节点变化时触发的事件 共两个参数，依次为：当前节点的数据，当前节点的 Node 对象
            - check-on-click-node: 是否在点击节点的时候选中节点
            - highlight-current: 是否高亮当前选中节点
            - current-node-key：当前选中的节点
            - check-change: 节点选中状态发生变化时的回调 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
          -->
        <el-tree
          ref="tree"
          node-key="id"
          show-checkbox
          :data="data"
          :default-expanded-keys="defaultOpen"
          :props="defaultProps"
          :default-checked-keys="defaultChecked"
          @check-change="getCurrentSelectArray"
          @current-change="getCurrentSelectArray"
        />
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      /**
       * id: 数据id
       * pid: 下级数据id
       * label: 数据label
       * checked: 是否选中
       */
      initData: [
        { id: 1, pid: 0, label: "1-0", checked: false },
        { id: 2, pid: 1, label: "1-1", checked: true },
        { id: 3, pid: 1, label: "1-2", checked: false },
        { id: 4, pid: 3, label: "1-1", checked: true },
        { id: 5, pid: 3, label: "1-2-2", checked: false },
        { id: 6, pid: 1, label: "1-3", checked: false },
        { id: 7, pid: 0, label: "2-0", checked: false },
        { id: 8, pid: 7, label: "2-1", checked: true },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      value: "", // options
      defaultChecked: [], // 默认选中的值
      defaultOpen: [], // 默认展开的选项数组
      selectArr: [], // 选择栏绑定值
    };
  },
  mounted() {
    // 数据处理
    this.data = this.JsonToTree(this.initData, 0);
  },
  methods: {
    getCurrentSelectArray() {
      // 若节点可被选择，则返回目前被选中的节点所组成的数组 接收两个boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false
      var arr = this.$refs.tree.getCheckedNodes(true, false);
      this.selectArr = [];
      // 赋值
      arr &&
        arr.length &&
        arr.forEach((item) => {
          this.selectArr.push({ label: item.label, value: item.id });
        });
      // 此处同下 有bug  不采用
      /* this.$nextTick(() => {
        // 获取当前选中元素 添加激活类
        var dom = document.querySelectorAll("div[role='group'] div[role='treeitem']")
        dom.forEach(item => {
          if (item.children.length <= 1) {
            item.classList.add('current-checked')
          }
        })
      }) */
    },
    changeSelect(val) {
      // 设置当前节点的选中状态 val 为数组， 第二个参数为 是否选中
      var treeCheckedIdList = [];
      this.initData.forEach((item) => {
        val.forEach((checked) => {
          if (checked.value === item.id) {
            treeCheckedIdList.push(item.id);
          }
        });
      });
      this.$refs.tree.setCheckedKeys(treeCheckedIdList, true);
      //
    },
    // json 转 树形
    JsonToTree(data, pid) {
      var itemArr = [];
      for (var i = 0; i < data.length; i++) {
        var node = data[i];
        /* eslint-disable */
        if (node.pid == pid) {
          if (node.checked) {
            // 初始化数据 - 数据绑定
            this.defaultChecked.push(node.id);
            this.defaultOpen.push(node.id);
            this.selectArr.push({ label: node.label, value: node.id });
          }
          var newNode = {
            id: node.id,
            pid: node.pid,
            label: node.label,
            checked: node.checked,
            children: this.JsonToTree(data, node.id),
          };
          itemArr.push(newNode);
        }
      }
      return itemArr;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-select-dropdown__item {
  height: auto;
  overflow: hidden;
  overflow-y: hidden;
  padding: 0;
}

.el-tree .el-tree-node__content {
  height: auto;
  padding: 0 20px;
}

.el-tree-node__label {
  font-weight: normal;
}

// 这里用于给选中节点的label文本添加颜色  有bug 1. 默认选中的节点上不了色(选择器没法选中) 2. 默认不展开全部节点时点击全选无法上色(dom是动态加载的，未展开前同样不存在dom) 故 目前不采用
/* /deep/ .current-checked label.el-checkbox.is-checked + span {
  color: #f60;
} */

// 这里用于隐藏节点label前面的勾选框 不需要刻意将之隐藏  但是需开启check-on-click-node属性  预知bug(懒得测试): 点击父节点时出现全选的情况 或许可以使用 check-strictly属性， 但是想来也没那么简单....
/* /deep/ .el-checkbox__inner {
  display: none;
  width: 0;
}
/deep/ .el-tree-node__content>.el-tree-node__expand-icon {
  padding: 0;
} */
</style>

最近有时间突然想起这个组件还有个问题未解决，花了点时间简单解决一下，方法不唯一，各位大佬多多批评~~