基於vue element-ui的樹形下拉選擇器

參考：https://blog.csdn.net/Mr_JavaScript/article/details/88604270

作了2點改進：

1.選中后關閉

    // 切換選項
    handleNodeClick(node){
      this.valueTitle = node[this.props.label]
      this.valueId = node[this.props.value]
      this.$emit('getValue',this.valueId)
      this.defaultExpandedKey = []
      this.$refs.select.blur()  //選中后關閉
    },

 

2.當找不到指定節點時清空

    initHandle(){
      if(this.valueId){
        var node = this.$refs.selectTree.getNode(this.valueId)
        if(node){
          this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[this.props.label]     // 初始化顯示
          this.$refs.selectTree.setCurrentKey(this.valueId)       // 設置默認選中
          this.defaultExpandedKey = [this.valueId]      // 設置默認展開
        }
      } else{
        this.clearHandle()  // 如果valueId不存在，清除選中
      }
      this.initScroll()
    }

使用：

                 <tree-select
                    :props="optionProps"
                    :options="treeOptions"
                    v-model="dlgData.pid"
                    :accordion="true"
                    :clearable="false"/>

組件源碼：

<template>
<el-select ref="select" :value="valueTitle" :clearable="clearable" @clear="clearHandle">
<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"
@node-click="handleNodeClick">
</el-tree>
</el-option>
</el-select>
</template>

<script>
export default {
name: "el-tree-select",
props:{

// 配置項
props:{
type: Object,
default: {
value:'id', // ID字段名
label: 'title', // 顯示名稱
children: 'children' // 子級字段名
}
},

// 選項列表數據(樹形結構的對象數組)
options:{ type: Array, default: [] },

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

// 可清空選項
clearable:{ type:Boolean, default: true },

// 自動收起
accordion:{ type:Boolean, default: false }

},
data() {
return {
valueId: null,
valueTitle:'',
defaultExpandedKey:[]
}
},
mounted(){
this.valueId = this.value, // 初始值
this.initHandle()
},
methods: {
// 初始化值
initHandle(){
if(this.valueId){
var node = this.$refs.selectTree.getNode(this.valueId)
if(node){
this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[this.props.label] // 初始化顯示
this.$refs.selectTree.setCurrentKey(this.valueId) // 設置默認選中
this.defaultExpandedKey = [this.valueId] // 設置默認展開
}
} else{
this.clearHandle() // 如果valueId不存在，清除選中
}
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){
this.valueTitle = node[this.props.label]
this.valueId = node[this.props.value]
this.$emit('getValue',this.valueId)
this.defaultExpandedKey = []
this.$refs.select.blur()
},

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

// 清空選中樣式
clearSelected(){
let allNode = document.querySelectorAll('#tree-option .el-tree-node')
allNode.forEach((element)=>element.classList.remove('is-current'))
}

},

watch: {
value(){
this.valueId = this.value
this.initHandle()
}
},
}
</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;
}
</style>