<!-- el-select & el-tree 下拉樹形選擇 -->
<template>
<el-select ref="selectTree" :value="value" v-model="valueName" :multiple="multiple" :clearable="clearable" @clear="clearHandle" @change="changeValue">
<el-option :value="valueName" class="options">
<el-tree
id="tree-option"
ref="selectTree"
:accordion="accordion"
:data="options"
:props="props"
:node-key="props.value"
@node-click="handleNodeClick">
<span slot-scope="{ data }">
<i :class="[data.color!=null?'ification_col':'']" :style="{'background-color':data.color}"></i> {{ data.name }}
</span>
</el-tree>
</el-option>
</el-select>
</template>
<script>
export default {
name: "el-tree-select",
props: {
// 配置項
props: {
type: Object,
default: () => {
return {
value: 'id',
children: 'children',
label: 'name'
}
}
},
// 選項列表數據(樹形結構的對象數組)
options: {
type: Array,
default: () => {
return []
}
},
// 初始值(單選)
value: {
type: Object,
default: () => {
return {}
}
},
// 初始值(多選)
valueMultiple: {
type: Array,
default: () => {
return []
}
},
// 可清空選項
clearable: {
type: Boolean,
default: true
},
// 自動收起
accordion: {
type: Boolean,
default: false
},
// 是否多選
multiple: {
type: Boolean,
default: false
}
},
data() {
return {
resultValue: [], // 傳給父組件的數組對象值
valueName: this.multiple ? [] : '' // 輸入框顯示值
}
},
watch: {
value() {
this.resultValue = this.multiple ? this.valueMultiple : this.value; // 初始值
this.initHandle()
}
},
mounted() {
this.resultValue = this.multiple ? this.valueMultiple : this.value; // 初始值
this.initHandle();
},
methods: {
// 初始化顯示
initHandle() {
if (this.resultValue) {
if(this.multiple) {
// 多選
this.resultValue.forEach(item => this.valueName.push(item.name));
} else {
// 單選
this.valueName = this.resultValue.name;
}
}
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) {
// 點擊葉子節點后被選中
if(this.multiple) {
// 多選(判重后添加)
let num = 0;
this.valueName.forEach(item => {
item == node[this.props.label] ? num++ : num;
})
if(num == 0) {
this.valueName.push(node[this.props.label]); // 輸入框顯示值
this.resultValue.push(node);
}
} else {
// 單選
this.$refs.selectTree.blur();
this.valueName = node[this.props.label];
this.resultValue = node;
}
this.$emit('getValue', this.resultValue);
},
// 從輸入框中直接刪除某個值時
changeValue(val) {
if(this.multiple) {
// 多選(同時刪掉傳給父組件中多余的值,再傳給父組件)
this.resultValue.map((item, index) => {
let i = val.indexOf(item.name)
if(i == -1) {
this.resultValue.splice(index, 1)
}
})
this.$emit('getValue', this.resultValue);
} else {
// 單選
this.$emit('getValue', val);
}
},
// 清除選中
clearHandle() {
this.valueName = this.multiple ? [] : ''
this.resultValue = []
this.clearSelected()
this.$emit('getValue', this.resultValue)
},
// 清空選中樣式
clearSelected() {
let allNode = document.querySelectorAll('#tree-option .el-tree-node')
allNode.forEach((element) => element.classList.remove('is-current'))
}
}
}
</script>
<style scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
height: auto;
max-height: 300px;
padding: 0;
overflow: hidden;
overflow-y: auto;
}
.el-select-dropdown__item.selected {
font-weight: normal;
}
.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>
el-select結合el-tree選擇框
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
推薦閱讀更多精彩內容
- [TOC] 簡介 element-ui 的 el-select 與 el-tree 組件的功能組合。 在線實例:h...
- 前言 實操讓我們更加有經驗,這里做了一個elementUI eleselect+tree的下拉組件功能實現完成,...