elementUI实现selecttree自定义下拉框树形组件

elementUI有select组件也有tree组件，但是就是没有下拉框和tree组件的结合体，那么这次我们就自定义一个。

效果图

引入组件

<select-tree ref="selectTree" @treeChange="treeChangeFun" :dataArray="orgList" :value="currentValue" />import selectTree from '@/components/selectTree.vue'components: {selectTree},treeChangeFun (val) {console.log(val)},

注意点：

treeChange为子组件的emit函数dataArray为tree的数据，形式为父子嵌套结构value为默认选中的节点id（也可能是其他key，以node-key定义的值为准），如果没有默认选中节点的需求，也可以不考虑此参数

编写组件js

源码如下：

<template><div class="selectTree"><el-select class="main-select-tree" ref="selectTree" v-model="transitValue"><el-option v-for="item in selectOptions" :key="item.id" :label="item.name" :value="item.id" style="display: none;" /><el-tree class="main-select-el-tree" ref="selecteltree" :highlight-current="true" :data="dataArray" :props="defaultProps" :expand-on-click-node="false" node-key="id" @node-click="handleNodeClick" :current-node-key="currentKey" :default-expanded-keys="[value]" /></el-select></div></template><script>export default {name: 'selectTree',props: {dataArray: Array,value: [Number, String]},data () {return {transitValue: '',selectOptions: [],currentKey: null,defaultProps: {label: 'name',children: 'children'}}},computed: {formatData () {let result = []function getChild (item) {item.forEach((i, x) => {if (Array.isArray(i['children'])) {result.push(i)getChild(i['children'])} else {result.push(i)}})}getChild(this.dataArray)return result}},methods: {handleNodeClick (node) {this.$emit('treeChange', node)this.transitValue = node.idthis.$refs.selectTree.blur()}},watch: {formatData (n) {if (n.length > 0) {this.selectOptions = n} else {this.selectOptions = []}},value: {// immediate: true,// deep: true,handler: function (n) {if (n.toString()) {this.$nextTick(() => {this.transitValue = nthis.currentKey = this.valuethis.$refs['selecteltree'].setCurrentKey(this.currentKey)})} else {this.$nextTick(() => {this.transitValue = nthis.currentKey = this.valuethis.$refs['selecteltree'].setCurrentKey(null)})}}}}}</script><style lang="less" scoped>/deep/ .el-tree-node.is-current>.el-tree-node__content {color: #409EFF;}</style>

注意点：

可以看到我们在select里面正常的包裹了option，这是为了依靠option来撑起下拉区域高度，设置样式为display：none。同时和option平级的地方包裹了tree组件，这是实际要展示的效果组件。transitValue是select组件的model值，selectOptions是option的值数组，currentKey是初始化时默认选中节点，defaultProps是tree数据的映射对象。formatData函数的功能是将嵌套数组转化成平铺为一级的一维数组，方便option组件遍历展示。handleNodeClick是tree的单击事件，这里触发子组件的emit事件。watch里的formatData用于检测数据变化动态渲染option。watch里的value用于实时检测value值，用来确定子组件tree的选中项（此操作用于初始化组件时，或者父组件重置条件，或者其他不通过直接点击子组件tree节点改变选中项值的操作）。