效果图：
<template>
<div class="box">
<el-select size="small" placeholder="请选择" clearable v-model="selectLabel" @clear="selectClear">
<el-option class="option-style" :label="selectLabel" :value="selectValue">
<el-input class="search" size="small" placeholder="输入关键字进行过滤" v-model="keywork" @click.stop.native>
</el-input>
<el-tree ref="tree" :data="treeDate" :props="treeProps" :show-checkbox="showCheckbox"
:filter-node-method="filterNode" @node-click="nodeClick" @check-change="checkChange">
<div slot-scope="{node, data}">
<i class="el-icon-warning-outline"></i>
<span :class="[{'tree-click': treeClick==data.value}]">{
{
data.label}}</span>
</div>
</el-tree>
</el-option>
</el-select>
</div>
</template>
<script>
export default {
name: "test",
components: {
},
data() {
return {
treeClick: null, //点击样式
keywork: null, //搜索关键字
selectLabel: null, //下拉框显示名称
selectValue: null, //下拉框显示ID
treeDate: [{
label: "主-测试0",
value: 0,
children: [{
label: "子-测试0",
value: 6
}]
},
{
label: "主-测试1",
value: 1,
children: [{
label: "子-测试1",
value: 7
}]
},
{
label: "主-测试2",
value: 2,
children: [{
label: "子-测试2",
value: 8
}]
},
{
label: "主-测试3",
value: 3,
children: [{
label: "子-测试3",
value: 9
}]
},
{
label: "主-测试4",
value: 4,
children: [{
label: "子-测试4",
value: 10
}]
},
{
label: "主-测试5",
value: 5,
children: [{
label: "子-测试6",
value: 11
},
{
label: "子-测试7",
value: 12
}
]
}
],
treeProps: {
children: "children",
label: "label"
}
}
},
props: {
// treeDate: {
//树状数据
// type: Array,
// default: ()=>{
}
// },
// treeProps: {
//树状规则
// type: Object,
// default: ()=>{
}
// },
showCheckbox: {
//是否可选择
type: Boolean,
default: true
}
},
methods: {
selectClear() {
this.treeClick = null;
this.selectLabel = null;
this.selectValue = null;
},
filterNode(value, data) {
if (!value) {
return true;
}
return data.label.indexOf(value) !== -1;
},
nodeClick(obj, node) {
this.treeClick = obj.value;
this.selectLabel = obj.label;
this.selectValue = obj.value;
console.log(obj, node);
},
checkChange(obj, node) {
console.log(obj, node);
},
},
watch: {
keywork(val) {
this.$refs.tree.filter(val);
}
},
computed: {
},
created() {
},
mounted() {
},
beforeDestroy() {
}
}
</script>
<style scoped>
.box {
width: 100%;
height: 100%;
margin: 1rem;
}
.search {
width: calc(100% - 8px - 0.5rem);
margin: 0 0.5rem;
}
.option-style {
padding: 0;
width: 100%;
height: 100%;
background-color: #FFFFFF;
}
.tree-click {
color: #4D74D6;
font-weight: 600;
}
/deep/ .el-tree-node__content {
padding: 0.25rem;
}
/deep/ .el-icon-caret-right {
font-size: 0;
}
</style>