performance-test/src/components/selecttree.vue

<template>
  <div class="selectTree">
    <el-select
      ref="elSelect"
      v-model="newVal"
      :placeholder="placeholder"
      :filter-method="filterTree"

      @change="$forceUpdate()"
      @clear="clear"
      popper-append-to-body
    >
      <el-option :value="newVal" :label="label" class="hasTree" disabled>
        <el-tree
          :data="openSearch ? searchData : list"
          ref="tree"
          :node-key="defaultParentProps.value"
          :expand-on-click-node="false"
          :default-expanded-keys="defaultExpandedKeys"
          :current-node-key="newVal"
          highlight-current
          :props="defaultParentProps"
          check-on-click-node
          auto-expand-parent
          @node-click="handleNodeClick"
        ></el-tree>
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "ElSelectTree",
  props: {
    value: {
      type: String,
      require: true,
    },
    list: {
      //树状列表:{label:'',value:'',children:[]}
      type: Array,
      default: () => {
        return [];
      },
    },
    placeholder: {
      type: String,
      default: "请选择",
    },
    type: {
      type: String,
      default: "0",
    },
    defaultParentProps: {
      type: Object,
      default: () => {
        return {
          children: "children",
          label: "companyName",
          value: "companyCode",
        };
      },
    },
  },

  data() {
    return {
      defaultProps: {},
      newVal: "", //本页面选中的数据
      label: "",
      selectTree: {},
      defaultExpandedKeys: [], //默认展开
      searchData: [], //带搜索数据
      openSearch: false, //是否开启搜索
    };
  },

  watch: {
    value: {
      handler(value) {
        if (value) {
          this.newVal = value;
          this.defaultExpandedKeys = [value];
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(value); //设置默认选择
          });
          const check = this.findLabel(this.list, value);
          if (check) {
            this.label = check.companyName;
          }
        }
      },
      deep: true, // 深度监听
      immediate: true, //首次触发
    },
    list: {
      handler(value) {
        if (value && this.type === "1") {
          this.newVal = value[0][this.defaultParentProps.value];
        }
      },
      deep: true, // 深度监听
    },
    newVal(value) {
      const check = this.findLabel(this.list, value);
      if (check) {
        this.label = check.companyName;
      }
      this.$emit("input", value);
    },
  },
  created() {
    // el-select 中加了filterable 点击箭头回收不去问题
    Object.getPrototypeOf(
      this.$options.components
    ).ElSelect.options.methods.handleFocus = () => {};
  },
  mounted() {},
  methods: {
    //节点选择事件
    handleNodeClick(data) {
      this.newVal = data[this.defaultParentProps.value];
      this.label = data[this.defaultParentProps.label];
      this.$refs.elSelect.blur();
      this.searchData = [];
      this.openSearch = false;
      this.$emit("change", data);
    },
    //筛选树
    async filterTree(value) {
      if (value) {
        this.openSearch = true;
        this.searchData = [];
        await this.findItem(this.list, value);
      } else {
        this.openSearch = false;
        this.searchData = [];
      }
    },
    //递归筛选,查询时用
    findItem(arr, value) {
      return new Promise((resolve) => {
        for (let i = 0; i < arr.length; i++) {
          const item = arr[i];
          if (item.label.includes(value)) {
            this.searchData.push(item);
          } else if (item.children && item.children.length > 0) {
            this.findItem(item.children, value);
          }
        }
        resolve(true);
      });
    },
    //递归筛选，回显label
    findLabel(arr, value) {
      for (let i = 0; i < arr.length; i++) {
        const item = arr[i];
        if (item[this.defaultParentProps.value] === value) {
          return item;
        } else if (item.children && item.children.length > 0) {
          const result = this.findLabel(item.children, value);
          if (result) {
            return result;
          }
        }
      }
    },
    //清空事件
    clear() {
      this.$refs.tree.setCurrentKey(null); //清空高亮
      this.label = "";
      this.newVal = "";
      this.searchData = [];
      this.openSearch = false;
      this.$emit("change", {});
    },
  },
};
</script>

<style scoped lang="scss">
.selectTree {
  display: inline-block;
  width: 100%;
}

.el-select {
  width: 100%;
}

.hasTree {
  padding: 0 !important;
  margin: 0;
  overflow: auto;
  line-height: normal;
  height: auto;
  cursor: default !important;
  font-weight: 500 !important;

  ::v-deep .el-tree-node__content {
    height: 34px;
    line-height: 34px;
  }

  ::v-deep .el-tree-node__label {
    font-size: 14px !important;
  }
}
</style>