<template>
|
<div class="tree_select">
|
<el-select :value="valueTitle"
|
ref="selectEl"
|
:filterable="filterable"
|
:clearable="clearable"
|
@clear="clearHandle"
|
:filter-method="selectFilterData"
|
:size="size"
|
style="height: 100%;width: 80%">
|
<el-option :value="valueId" :label="valueTitle" style="height: 100%;width: 80%">
|
<el-tree id="tree-option"
|
ref="selectTree"
|
:accordion="accordion"
|
:data="options"
|
:props="dataProps"
|
:node-key="dataProps.value"
|
:expand-on-click-node="false"
|
:default-expanded-keys="defaultExpandedKey"
|
:filter-node-method="filterNode"
|
@node-click="handleNodeClick">
|
</el-tree>
|
</el-option>
|
</el-select>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
name: 'SelectTree',
|
props: {
|
/* 配置项 */
|
dataProps: {
|
type: Object,
|
default: () => {
|
return {
|
value: 'id', // ID字段名
|
label: 'title', // 显示名称
|
children: 'children' // 子级字段名
|
}
|
}
|
},
|
/* 选项列表数据(树形结构的对象数组) */
|
options: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
/* 初始值 */
|
value: {
|
type: [Number, String],
|
default: () => {
|
return null
|
}
|
},
|
/* 可清空选项 */
|
clearable: {
|
type: Boolean,
|
default: () => {
|
return false
|
}
|
},
|
/* 自动收起 */
|
accordion: {
|
type: Boolean,
|
default: () => {
|
return false
|
}
|
},
|
/**
|
* 下拉选项框的大小，默认最小
|
*/
|
size: {
|
type: String,
|
default: () => {
|
return 'mini'
|
}
|
},
|
// 是否可以搜索
|
filterable: Boolean
|
},
|
data () {
|
return {
|
valueId: this.value, // 初始值
|
valueTitle: '',
|
defaultExpandedKey: []
|
}
|
},
|
mounted () {
|
this.$nextTick(function () {
|
this.initHandle()
|
})
|
},
|
methods: {
|
// 初始化值
|
initHandle () {
|
if (this.valueId) {
|
this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[this.dataProps.label] // 初始化显示
|
this.$refs.selectTree.setCurrentKey(this.valueId) // 设置默认选中
|
this.defaultExpandedKey = [this.valueId] // 设置默认展开
|
}
|
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
|
})
|
})
|
},
|
// 切换选项
|
handleNodeClick (node) {
|
this.valueTitle = node[this.dataProps.label]
|
this.valueId = node[this.dataProps.value]
|
this.$emit('getValue', this.valueId)
|
this.defaultExpandedKey = []
|
// 选中后失去焦点，隐藏下拉框
|
this.$refs.selectEl.blur()
|
// 把数据还原
|
this.selectFilterData('')
|
},
|
/**
|
* 下拉框搜索
|
*/
|
selectFilterData (val) {
|
this.$refs.selectTree.filter(val)
|
},
|
/**
|
* 过滤节点
|
*/
|
filterNode (value, data) {
|
if (!value) return true
|
return data.label.indexOf(value) !== -1
|
},
|
// 清除选中
|
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'))
|
}
|
},
|
watch: {
|
/**
|
* 监听绑定的值变化
|
*/
|
value () {
|
this.valueId = this.value
|
this.initHandle()
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
