下拉树级带搜索功能
可以直接复制粘贴到自己的项目里,方法处把接口替换一下
<template>
<div>
<el-popover
placement="bottom"
width="200"
trigger="click">
<el-input
slot="reference"
class="mrInput"
:placeholder="placeholder"
v-model="nowSelVal"
clearable
:disabled="disabled"
@input="changeValTime"
@change="changeVal"
@clear="clearVal"
/>
<div class="customTreeSelectCont">
<el-tree
v-if="searchTit"
:props="treeProps"
:load="loadNode"
empty-text="暂无数据"
lazy
:expand-on-click-node="false"
@node-click="handleNodeClick"
/>
<ul class="searchUl" v-else>
<li
v-for="(item,index) in searchOptions"
:key="'searchUl__'+index"
@click="selSearchLi(item)"
>
{{item.label}}
</li>
</ul>
</div>
</el-popover>
</div>
</template>
<script>
export default {
name: "customTreeSelect",
data() {
return {
nowSelVal:'',
nowSelValBF:'',
placeholder:'',
disabled:false,
treeProps: {
label: 'label',
value: 'value',
children: 'children',
isLeaf: 'leaf'
},
searchTit:true,
searchSel:'',
searchOptions:[]
}
},
methods: {
// 搜索框,实时
changeValTime(val) {
if(!val){
this.searchTit = true
}else{
this.searchTit = false
this.getSearchSelFun()
}
},
// 搜索框,失去焦点或用户按下回车
changeVal(val) {
console.log('changeVal');
},
// 搜索框-清空
clearVal() {
this.searchTit = true
},
getSearchSelFun(){
this.searchOptions = [
{
value: '选项1',
label: '黄金糕'
},{
value: '选项2',
label: '黄金糕22'
},{
value: '选项3',
label: '黄金糕33'
},
]
},
// tree的懒加载
loadNode(node, resolve) {
// 第一次获取数据
if (node.level === 0) {
const arr = [
{
label: '测试1',
value: '111'
},{
label: '测试2',
value: '222'
},
]
return resolve(arr)
} else {
// 之后点击获取数据
if(node.level === 5) return resolve([])
const datas = [{
label: 'mmm',
value: '555'
}]
return resolve(datas)
// // return resolve([])
}
},
handleNodeClick(data) {
this.nowSelVal = data[this.treeProps.label]
},
selSearchLi(data) {
console.log(data);
this.nowSelVal = data[this.treeProps.label]
},
}
}
</script>
<style lang="scss" scoped>
.mrInput{
width: 433px;
}
.searchUl{
padding:0;
margin:0;
list-style: none;
li{
padding:5px 10px;
cursor: pointer;
&:hover{
background: #f5f7fa;
}
}
}
.customTreeSelectCont{
max-height: 500px;
overflow-y: auto;
&::-webkit-scrollbar {
width: 6px;
}
//默认不展示
&::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(0,0,0,0);
}
//划过展示,具体写法自己改改
&:hover::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.1);
}
&::-webkit-scrollbar-track {
border-radius: 0;
background: rgba(0,0,0,0);
}
}
</style>
成果是这样的,可以手动试一下