el-select + el-tree

1. 效果图

 2. 组件

<!--
 * @Author: wangzhendong
 * @Descripttion: file content
 * @Date: 2021-09-03 15:36:58
 * @LastEditors: wangzhendong
 * @LastEditTime: 2021-09-26 10:59:10
 * @FilePath: \amIrpWeb_project\src\pc\views\BondTrade\components\TreeSelect.vue
-->
<template>
  <div class="tree-select-yuqing">
    <el-select
      ref="carrerSelect"
      clearable
      popper-class="hide-padding"
      collapse-tags
      size="mini"
      v-model="mineStatus"
      :placeholder="placeholder"
      multiple
      @change="selectChange"
      style="width:100%;"
      v-bind="$attrs"
    >
      <el-option :value="mineStatusValue" :style="`height: auto;width:${optionWidth}`">
        <el-tree
          default-expand-all
          :data="dataOptions"
          show-checkbox
          node-key="id"
          ref="tree"
          highlight-current
          :props="defaultProps"
          @check-change="handleCheckChange"
        ></el-tree>
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  name: "TreeSelect",
  props: {
    dataOptions: {
      type: Array
    },
    defaultProps: {
      type: Object
    },
    optionWidth: {
      type: String,
      default: "200px"
    },
    clearData: {
      type: Array
    },
    value: {
      type: Array
    },
    placeholder: {
      type: String,
      default: "请选择"
    }
  },
  watch: {
    clearData: {
      deep: true,
      handler: function(val) {
        if (val.length == 0) {
          this.mineStatus = "";
          this.mineStatusValue = [];
        }
      }
    }
    // value: {
    //   deep: true,
    //   handler: function(val) {
    //     //val.split
    //     this.mineStatus = val
    //   }
    // }
  },
  data() {
    return {
      mineStatus: "",
      mineStatusValue: []
    };
  },
  methods: {
    //select框值改变时候触发的事件
    selectChange(e) {
      const arrNew = [];
      const dataLength = this.mineStatusValue.length;
      const eleng = e.length;
      for (let i = 0; i < dataLength; i++) {
        for (let j = 0; j < eleng; j++) {
          if (e[j] === this.mineStatusValue[i][this.defaultProps.label]) {
            arrNew.push(this.mineStatusValue[i]);
          }
        }
      }
      this.$refs.tree.setCheckedNodes(arrNew); //设置勾选的值
      const res = this.$refs.tree.getCheckedNodes(true, true); //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
      const arrLabel = [];
      const arr = [];
      res.forEach(item => {
        arrLabel.push(item[this.defaultProps.label]);
        arr.push(item);
      });
      this.mineStatusValue = arr;
      this.mineStatus = arrLabel;
      this.$emit(
        "input",
        this.mineStatusValue.map(item => item.id)
      );
      this.$emit(
        "change",
        this.mineStatusValue.map(item => item.id)
      );
    },
    handleCheckChange() {
      const res = this.$refs.tree.getCheckedNodes(true, true); //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
      const arrLabel = [];
      const arr = [];
      res.forEach(item => {
        arrLabel.push(item[this.defaultProps.label]);
        arr.push(item);
      });
      this.mineStatusValue = arr;
      this.mineStatus = arrLabel;
      this.$emit(
        "input",
        this.mineStatusValue.map(item => item.id)
      );
      this.$emit(
        "change",
        this.mineStatusValue.map(item => item.id)
      );
    }
  },
  mounted() {
    this.$refs.tree.setCheckedKeys(this.value); //设置勾选的值
  }
};
</script>
<style lang="less">
.tree-select-yuqing {
  width: 100%;
}
.hide-padding {
  .el-select-dropdown__item {
    padding: 0;
    display: contents;
  }
  .el-scrollbar {
    overflow: hidden;
    position: relative;
    padding-bottom: 20px;
  }
  .el-scrollbar__wrap {
    overflow: scroll;
    height: 100%;
    padding: 0 20px 0 0;
  }
}
</style>
<style lang="less" scoped>
/deep/ .el-tag {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-color: transparent;
  margin: 2px 0 2px 2px !important;
  background-color: #f0f2f5;
}
/deep/ .el-tree-node__label {
  font-size: 12px;
}
/deep/ .el-select__tags {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  & > span {
    display: inline-block;
  }
}
</style>

3. 使用

  <TreeSelect
          placeholder="请选择债券类型"
          :disabled="disabled"
          :clearData="form.bondType"
          :dataOptions="fuzzyBuyOptions.bondTypeOptions"
          :defaultProps="{ children: 'children', label: 'label' }"
          v-model="form.bondType"
          optionWidth="100%"
        />