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

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

<template>
  <div>
    <el-select v-model="selectArr" placeholder="请选择" multiple @change="changeSelect">
      <el-option :label="value" :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>
    <br>
    <br>
  </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-2-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(item.label)
      })
      // 此处同下 有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 === item.label) {
     
            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(node.label)
          }
          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="less" 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>