操讓我們更加有經(jīng)驗(yàn)，這里做了一個(gè)elementUI eleselect+tree的下拉組件
功能實(shí)現(xiàn)完成，但是有點(diǎn)不完美，選中后無法關(guān)閉下拉框

這個(gè)是重點(diǎn) 加了一行代碼

this.$refs.selectblur.blur();

image.png

頁面引用

<SelectTree
            :props="props"
            :options="optionData"
            :clearable="isClearable"
            :accordion="isAccordion"
            :value="valueId"
            @getValue="getValue($event)"
          />

import SelectTree from "./components/treeSelect";


export default {
  components: {
    SelectTree
  },
  data() {
    return {
      privilegeList: [
        {
          id: 1,
          label: "一級(jí) 1",
          children: [
            {
              id: 4,
              label: "二級(jí) 1-1"
            }
          ]
        },
        {
          id: 2,
          label: "一級(jí) 2",
          children: [
            {
              id: 5,
              label: "二級(jí) 2-1"
            },
            {
              id: 6,
              label: "二級(jí) 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "一級(jí) 3",
          children: [
            {
              id: 7,
              label: "二級(jí) 3-1"
            },
            {
              id: 8,
              label: "二級(jí) 3-2"
            }
          ]
        }
      ],
      isClearable: true, // 可清空（可選）
      isAccordion: true, // 可收起（可選）
      valueId: "",
      props: {
        // 配置項(xiàng)（必選）
        value: "id",
        label: "name",
        children: "children"
        // disabled:true
      }
    };
  },
computed: {
    /* 轉(zhuǎn)樹形數(shù)據(jù) */
    optionData() {
    //這里如果是后臺(tái)返回的樹形結(jié)構(gòu)可直接引用 不用轉(zhuǎn)換
      let cloneData = JSON.parse(JSON.stringify(this.privilegeList)); // 對(duì)源數(shù)據(jù)深度克隆
      return cloneData.filter(father => {
        // 循環(huán)所有項(xiàng)，并添加children屬性
        let branchArr = cloneData.filter(child => father.id == child.parentId); // 返回每一項(xiàng)的子級(jí)數(shù)組
        branchArr.length > 0 ? (father.children = branchArr) : ""; //給父級(jí)添加一個(gè)children屬性，并賦值
        return father.parentId == 0; //返回第一層
      });
      return cloneData;
    }
  },
  methods: {
    getValue(value) {
      console.log(value);
    }
  }
};

下面是組件 可以直接用

<template>
<el-select
:value="valueTitle"
:clearable="clearable"
class="maxwidth"
@clear="clearHandle"
ref="selectblur"

<el-option :value="valueTitle" :label="valueTitle" class="options">
  <el-tree
    id="tree-option"
    ref="selectTree"
    :accordion="accordion"
    :data="options"
    :props="props"
    :node-key="props.value"
    :default-expanded-keys="defaultExpandedKey"
    :expand-on-click-node="false"
    @node-click="handleNodeClick"
  />
</el-option>

</el-select>
</template>

<script>
export default {
name: "ElTreeSelect",
props: {
// 配置項(xiàng)
props: {
type: Object,
default: () => ({
value: "id", // ID字段名
label: "title", // 顯示名稱
children: "children" // 子級(jí)字段名
})
},

// 選項(xiàng)列表數(shù)據(jù)(樹形結(jié)構(gòu)的對(duì)象數(shù)組)
options: { type: Array, default: () => [] },

// 初始值
value: { type: String, default: null },

// 可清空選項(xiàng)
clearable: { type: Boolean, default: true },

// 自動(dòng)收起
accordion: { type: Boolean, default: false }

},
data() {
return {
valueId: null,
valueTitle: "",
defaultExpandedKey: []
};
},

watch: {
value() {
this.valueId = "";
this.valueTitle = "";
this.valueId = this.value;
this.initHandle();
}
},
mounted() {
this.valueId = this.value; // 初始值
this.initHandle();
},
methods: {
// 初始化值
initHandle() {
if (this.valueId) {
this.valueTitle = this.refs.selectTree.setCurrentKey(this.valueId); // 設(shè)置默認(rèn)選中
this.defaultExpandedKey = [this.valueId]; // 設(shè)置默認(rèn)展開
}
this.initScroll();
},

// 初始化滾動(dòng)條
initScroll() {
  this.$nextTick(() => {
    const scrollWrap = document.querySelectorAll(
      ".el-scrollbar .el-select-dropdown__wrap"
    )[0];
    const 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));
  });
},

// 切換選項(xiàng)
handleNodeClick(node) {
  this.$refs.selectblur.blur();//讓下拉框失去焦點(diǎn)事件
  this.valueTitle = node[this.props.label];
  this.valueId = node[this.props.value];
  this.$emit("getValue", this.valueId);
  this.defaultExpandedKey = [];
},

// 清除選中
clearHandle() {
  this.valueTitle = "";
  this.valueId = null;
  this.defaultExpandedKey = [];
  this.clearSelected();
  this.$emit("getValue", null);
},

// 清空選中樣式
clearSelected() {
  const 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: #409eff;
font-weight: 700;
}
.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
color: #606266;
font-weight: normal;
}
.maxwidth {
width: 100%;
}
</style>

http://www.itdecent.cn/p/61119b7c6f14