粗略記錄一下自己做過的總結 此文章代碼爲項目中組件 template部分
<template>
<el-select ref="selectTree1" :value="value" v-model="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">
<span slot-scope="{ node, data }">
<i :class="[data.color!=null?'ification_col':'']" :style="{'background-color':data.color}"></i> {{ data.name }}
</span>
</el-tree>
</el-option>
</el-select>
</template>
js部分:
<script>
export default {
name: "el-tree-select",
props: {
// 配置項
props: {
type: Object,
default: {
value: 'id',
children: 'children',
label: 'name'
}
},
// 選項列表數據(樹形結構的對象數組)
options: {type: Array, default: []},
// 初始值
// value:{ type: Number, default: null },
value: {type: Object, default: {}},
// 可清空選項
clearable: {type: Boolean, default: true},
// 自動收起
accordion: {type: Boolean, default: false}
},
data() {
return {
value1:'',
valueId: null,
valueTitle: '',
defaultExpandedKey: [],
labelSelection: {},
}
},
mounted() {
console.log(this.value.id);
this.valueId = this.value.name; // 初始值
this.initHandle();
},
methods: {
// 初始化值
initHandle() {
if (this.valueId) {
console.log(this.valueId);
// this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[this.props.label]; // 初始化顯示
this.valueTitle = this.valueId.name; // 初始化顯示
this.$refs.selectTree.setCurrentKey(this.valueId) // 設置默認選中
this.defaultExpandedKey = [this.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) {
console.log(node);
if (node.children.length<=0){
this.$refs.selectTree1.blur();
this.valueTitle = node[this.props.label];
this.valueId = node;
this.$emit('getValue', this.valueId);
this.defaultExpandedKey = [];
}
},
// 清除選中
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>
css部分:
<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;
}
.el-popper {
z-index: 9999;
}
.ification_col {
width: 20px;
height: 10px;
display: inline-block;
}
</style>