element-ui 中el-select 嵌套 tree树形控件（转帖）

参考位置：https://blog.csdn.net/weixin_45140661/article/details/90898558

主要代码：

控件部分

<template>
  <div>
    <el-form ref="form" :model="form" label-width="130px">
      <el-form-item label="xx:">
        <el-select v-model="form.selects" @change="selectChange" style="width: 100%;" popper-class="treeOption" multiple  placeholder="xx">
          <el-option :value="mineStatusValue" style="height: auto;">
            <el-tree ref="tree"
                     node-key="ORGID" // 设置这才能设值
                     :data="options"
                     :props="optionProps"
                     show-checkbox
                     @check="handleCheckChange"></el-tree>
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

逻辑部分：

methods:{
    handleCheckChange(){
      let res = this.$refs.tree.getCheckedNodes(true, true) // 设置两个true 只选中勾选部分的子节点，不考虑父节点
      let arrLabel = []
      let arr = []
      let temp =[]
      res.forEach(item => {
        arrLabel.push(item.ORGNAME); // lable值
        arr.push(item); // lable和其他值的对象集合
      });
      this.mineStatusValue = arr;
      this.form.selects = arrLabel
      this.mineStatusValue.forEach(element => {
        temp.push('.' + element + '.')
      });
      this.$emit('allocationCenterCall', temp.toString())
    },
    selectChange(e){
      console.log(e,'ee')
      var arrNew = [];
      var dataLength = this.mineStatusValue.length;
      var eleng = e.length;
      for(let i = 0; i< dataLength ;i++){
        for(let j = 0; j < eleng; j++){
          if(e[j] === this.mineStatusValue[i].ORGNAME){
            arrNew.push(this.mineStatusValue[i])
          }
        }
      }
      this.$refs.tree.setCheckedNodes(arrNew);//设置勾选的值 注意：node-key值
    }
  }
}