el-ztree下拉检索多选单选

一：引用ztree组建父页面

<template>
  <div class="app-container">
      <ZtreeSelect
        :parentZtreeObj="ztreeName"
        @ztreeObj="ztreeObj"
        :multiples="true"
        :options="deptOptions"  />
  </div>
</template>

<script>
  import ZtreeSelect from "./ZtreeSelect";
  export default {
    name: "Add",
    components: {ZtreeSelect},
    data() {
      return {
        ztreeName:{
          "labelsLog": ["二级 1-1"],
          "labels": ["二级 1-1"],
          "values": [4]
        },
        deptOptions:[{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }]
      };
    },
    methods: {
      ztreeObj(Obj){
        this.ztreeName = Obj
      }
    }
  };
</script>

二：ztree组建页面

<template>
  <div class="ztreeSelectWrap">
    <el-select
       ref="selects"
       style="width:100%"
       @remove-tag="removeTag"
       @clear="clear" clearable
       v-model="modelObj.labels"
       :multiple="multiples"
       placeholder="请选择">
      <el-option value="" label="" class="hasTree" disabled>
        <el-input
          v-if="filterable"
          clearable
          placeholder="输入关键字进行过滤"
          v-model="filterText">
        </el-input>
        <el-tree
          ref="tree"
          :accordion="accordion"
          :data="options"
          :node-key="nodeKey"
          :props="defaultProps"
          :default-expand-all="defaultExpandAll"
          :show-checkbox="multiples"
          :check-strictly="checkStrictly"
          :highlight-current="true"
          @check-change="handleCheckChange"
          @node-click="handlerClick"
          :filter-node-method="filterNode"
          >
        </el-tree>
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "ZtreeSelect",
  props:{
    multiples:{
      type: Boolean,
      default: false
    },
    options:{
      type:Array
    },
    ztreeObj:{
      type:Object
    },
    defaultProps:{
      children: 'children',
      label: 'label'
    },
    //是否默认展开全部
    defaultExpandAll:{
      type: Boolean,
      default: false
    },
    //设置唯一标识的属性
    nodeKey:{
      type: String,
      default: 'id'
    },
    //手风琴
    accordion:{
      type: Boolean,
      default: true
    },
    //是否开始检索
    filterable:{
      type: Boolean,
      default: true
    },
    //父子不互相关联
    checkStrictly:{
      type: Boolean,
      default: false
    },
    parentZtreeObj:{}
  },
  watch: {
    "filterText"(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      currentKey:"",
      filterText:"",
      modelObj:{
        labelsLog:this.multiples?[]:"",
        labels:this.multiples?[]:"",
        values:this.multiples?[]:"",
      },
    };
  },
  created() {
    if(this.parentZtreeObj["labels"]){
      this.modelObj = this.parentZtreeObj
      this.$nextTick(() => {
        if(this.multiples){ //多选默认赋值
          this.$refs.tree.setCheckedKeys(this.modelObj.values);
        }else { //单选默认赋值
          this.$refs.tree.setCurrentKey(null);  //取消高亮
          this.$refs.tree.setCurrentKey(this.modelObj.values);    //设置高亮
        }
      });
    }
  },
  mounted() {

  },
  methods: {
    //单选点击赋值
    handlerClick(data,Node){
      if(!this.multiples){
        this.modelObj.labels= data.label;
        this.modelObj.labelsLog= data.label;
        this.modelObj.values= data.id;
        this.$refs.selects.blur()
        this.$emit("ztreeObj",this.modelObj)
      }
    },
    //多选checkbox选择赋值
    handleCheckChange(data, checked, indeterminate){
      let DataList = this.$refs.tree.getCheckedNodes();
      let values = [],Texts = [];
      if(DataList && DataList.length>0){
        DataList.forEach(item=>{
          values.push(item.id)
          Texts.push(item.label)
        })
      }
      this.modelObj.labels = Texts
      this.modelObj.values = values
      this.modelObj.labelsLog = Texts
      this.$emit("ztreeObj",this.modelObj)
    },
    //select清空事件
    clear() {
      this.$refs.tree.setCheckedKeys([]);
    },
    //select多选删除事件
    removeTag(val){
      if(this.modelObj.labelsLog && this.modelObj.labelsLog.length>0){
        this.modelObj.labelsLog.forEach((item,i)=>{
          if(val === item){
            this.modelObj.values.splice(i,1);
            this.modelObj.labelsLog.splice(i,1);
          }
        })
      }
      this.$refs.tree.setCheckedKeys(this.modelObj.values);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    }
  },
}
</script>

<style scoped>
.ztreeSelectWrap {
  position:relative;
}
.ztreeMain {
  overflow:hidden;
  background-color:#fff;
  position:absolute;
  left:0;
  top:40px;
  right:0;
  z-index:99999;
  border:1px solid #DCDFE6;
  border-radius:5px;
  padding:5px;
  box-shadow:1px 1px 6px rgba(0,0,0,.3);
}
.ztreeContant {
  max-height:300px;
  overflow:hidden;
  overflow-y:auto;
}
.hasTree {
  padding: 0 5px !important;
  margin: 0;
  overflow: auto;
  line-height: normal;
  height: auto;
  cursor: default !important;
  font-weight: 500 !important;
}
/* 设置高亮颜色为浅蓝色 */
.el-tree .is-current .el-tree-node__content {
    background-color: lightblue;
    color: white;
}

/* 如果想要更加强烈的对比，可以增加透明度 */
.el-tree .is-current:hover .el-tree-node__content {
  background-color: rgba(173, 216, 230, 0.4);
}
</style>