kd-aiot-frontend-wt/src/components/selectTree/index.vue

<template>
  <el-select
    filterable
    ref="test"
    :size="size"
    :disabled="isBindPlan"
    :value="valueTitle"
    :clearable="clearable"
    @clear="clearHandle"
    :placeholder="placeholder"
  >
    <el-option :value="valueTitle" :label="valueTitle" class="options">
      <slot :pHandleNodeClick="handleNodeClick">
        <el-tree
          id="tree-option"
          ref="selectTree"
          :key="treeKey"
          :accordion="accordion"
          :data="options"
          :props="props"
          :node-key="props.value"
          :default-expand-all="isAll"
          :default-expanded-keys="defaultExpandedKey"
          @node-click="handleNodeClick"
        >
        </el-tree>
      </slot>
    </el-option>
  </el-select>
</template>

<script>
  export default {
    props: {
      // 配置项
      props: {
        type: Object,
        default() {
          return {
            value: 'value', // ID字段名
            label: 'label', // 显示名称
            children: 'children' // 子级字段名
          };
        }
      },
      // 展开可不展开
      isAll: { type: Boolean, default: true },
      // 选项列表数据(树形结构的对象数组)
      options: { type: Array, default: () => [] },
      // 初始值
      value: { type: [String, Number], default: null },
      // 可清空选项
      clearable: { type: Boolean, default: false },
      // 自动收起
      accordion: { type: Boolean, default: false },
      // // 可清空选项
      // disabled: { type: Boolean, default: false },
      // 多选
      multiple: { type: Boolean, default: false },
      //

      placeholder: {
        type: String,
        default: '请选择'
      },
      size: {
        type: String,
        default: 'mini'
      },
      dialogType: {
        type: String,
        default: ''
      },
      tableIndex: { type: Number, default: null },
      initStr: {
        type: String,
        default: ''
      },
      isBindPlan: {
        type: Boolean,
        default: function () {
          return false;
        }
      }
    },
    data() {
      return {
        valueId: null,
        treeKey: true,
        valueTitle: '',
        defaultExpandedKey: []
      };
    },
    watch: {
      // 这个需要用深度监听，不然回显有时会失效
      value: {
        handler(val) {
          console.log('value变化', val);
          console.log(this.value);
          this.valueId = this.value+'';
          this.initHandle();
        },
        deep: true,
        immediate: true
      },
      options: {
        handler(val) {
          this.initHandle();
        },
        deep: true,
        immediate: true
      },
      initStr: {
        handler(newVal, oldVal) {
          if (this.initStr) {
            // console.log(newVal);
            this.valueTitle = newVal;
          }
        },
        immediate: true
      }
    },
    // mounted() {
    //   this.valueId = this.value; // 初始值
    //   setTimeout(() => {
    //     this.initHandle();
    //   },300)
    // },
    methods: {
      // 初始化值
      async initHandle() {
        if (this.valueId) {
          this.$nextTick(async () => {
            console.log(this.options);
            const tempValue = await this.$refs.selectTree.getNode(this.valueId);
            console.log(tempValue);
            setTimeout(() => {
              console.log(tempValue);
              if (tempValue) {
                this.valueTitle = tempValue.data[this.props.label]; // 初始化显示
                this.$refs.selectTree.setCurrentKey(this.valueId); // 设置默认选中
                this.defaultExpandedKey = [this.valueId]; // 设置默认展开
              }
            }, 300);
          });
        } else {
          this.valueTitle = '';
        }
        this.initScroll();
      },
      // 初始化滚动条
      initScroll() {
        this.$nextTick(() => {
          let scrollWrap = document.querySelectorAll(
            '.el-scrollbar .el-select-dropdown__wrap'
          )[0];
          let scrollBar = document.querySelectorAll(
            '.el-scrollbar .el-scrollbar__bar'
          );
          scrollWrap.style.cssText =
            'margin: 0px; max-height: none; overflow: hidden;';
          scrollBar.forEach((ele) => (ele.style.width = 0));
        });
      },
      // 切换选项
      handleNodeClick(node) {
        // 多选
        if (this.multiple) {
          this.valueTitle += `${node[this.props.label]} , `;
          this.valueId = node[this.props.value];
          this.$emit('getValue', node);
          this.defaultExpandedKey = [];
          return;
        }
        this.valueTitle = node[this.props.label];
        this.valueId = node[this.props.value];

        this.$emit('input', this.valueId); 
        this.$emit('getValue', node);
        this.defaultExpandedKey = [];
        this.$refs.test.handleClose();
      },
      // 清除选中
      clearHandle() {
        this.valueTitle = '';
        this.valueId = null;
        this.defaultExpandedKey = [];
        // this.clearSelected()
        this.treeKey = !this.treeKey;
        this.$emit('getValue', null);
      },
      // 清空选中样式
      clearSelected() {
        let allNode = document.querySelectorAll('#tree-option .el-tree-node');
        allNode.forEach((element) => element.classList.remove('is-current'));
      }
    }
  };
</script>
<style scoped>
  .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
    height: auto;
    max-height: 274px;
    padding: 0;
    overflow: hidden;
    overflow-y: auto;
  }
  .el-select-dropdown__item.selected {
    font-weight: normal;
  }
  ul li >>> .el-tree .el-tree-node__content {
    height: auto;
    padding: 0 20px;
  }
  .el-tree-node__label {
    font-weight: normal;
  }
  .el-tree >>> .is-current .el-tree-node__label {
    color: #1890ff;
    font-weight: 700;
  }
  .el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
    color: #606266;
    font-weight: normal;
  }
</style>