<template>
<el-select style="width: 100%" :value="valueTitle" :clearable="clearable" :filterable="filterable" :disabled="disabled"
@clear="clearHandle" remote :remote-method="remoteMethod">
<el-option :value="valueTitle" :label="valueTitle">
<el-tree id="tree-option"
ref="selectTree"
:accordion="accordion"
:data="options"
:props="props"
:node-key="props.value"
:filter-node-method="filterNode"
: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:()=>{
return {
value:'id', // ID字段名
label: 'name', // 显示名称
children: 'children' // 子级字段名
}
}
},
/* 选项列表数据(树形结构的对象数组) */
options:{
type: Array,
default: ()=>{ return [] }
},
/* 初始值 */
value:{
type: Number,
default: ()=>{ return null }
},
/* 可清空选项 */
clearable:{
type:Boolean,
default:()=>{ return true }
},
/* 可模糊搜索 */
filterable:{
type:Boolean,
default:()=>{ return true }
},
/* 自动收起 */
accordion:{
type:Boolean,
default:()=>{ return false }
},
disabled:{
type:Boolean,
default:()=>{ return false }
}
},
data() {
return {
valueId:this.value, // 初始值
valueTitle:'',
defaultExpandedKey:[],
list:[],
filterText:'',
}
},
mounted(){
this.list = JSON.parse(JSON.stringify(this.options));
this.initHandle()
},
methods: {
// 初始化值
initHandle(){
if(this.valueId){
this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[this.props.label]; // 初始化显示
this.$refs.selectTree.setCurrentKey(this.valueId); // 设置默认选中
this.defaultExpandedKey = [this.valueId]; // 设置默认展开
}
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,node.grade);
this.defaultExpandedKey = [];
},
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
//模糊查询
remoteMethod(query){
this.filterText = query;
},
// 清除选中
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'));
},
// 全部折叠
collapseAll () {
let self = this;
// 将没有转换成树的原数据
let list = this.list;
for (let i = 0; i < list.length; i++) {
self.$refs.selectTree.store.nodesMap[list[i].id].expanded = false
}
},
},
watch: {
value(){
this.valueId = this.value;
this.initHandle();
},
filterText(val) {
if(val === ''){
this.collapseAll();
}
this.$refs.selectTree.filter(val);
}
},
};
</script>