el-select 中放置el-tree
<template>
<div>
<el-select v-model="form" placeholder="请选择" multiple collapse-tags size="small"
@focus="Focus" :clearable="clearable">
<el-option :value="value" disabled >
<el-input style="margin-left: 2px;margin-right: 15px;width: 94%;" placeholder="输入关键字进行过滤" v-model="filterText" clearable size="small"></el-input>
<div>
<el-tree
:filter-node-method="filterNode"
:data="dataall"
:props="defaultProps"
:default-expanded-keys="datatree"
ref="eltree"
:node-key="code"
@node-click="getinfo"
:default-expand-all="false"
></el-tree>
</div>
</el-option>
</el-select>
</div>
</template>
<script>
var that;
export default {
props:{
dates:String,
childData:Array,
name:String,
code:String,
childrenName:String,
clearable:{
type:Boolean,
default:false
},
chooseparent:{ //默认等于false，只是获取叶子节点值
type:Boolean,
default:false
},
treeHeight:{//树形下拉的高度
type:String,
default:'150px'
},
selectFocus:Function//选择框获取焦点事件
},
data() {
return {
value: "",//默认值
defaultProps: {
children: this.childrenName,
label: this.name
},
form: [],
codeForm:[],
isAll:false,
x:true,
data:[],
datatree:[],
dataall:[],
list:[],
filterText:''
};
},
watch: {
filterText(val) {
if (val != "") {
this.datatree = [];
let data1 = [];
this.data.forEach((items1) => {
if (items1.name.search(val) != -1) {
data1.push(items1);
this.datatree.push(items1.id);
} else {
if (items1.children.length > 0) {
items1.children.forEach((items2) => {
if (items2.name.search(val) != -1) {
data1.push(items2);
this.datatree.push(items2.id);
} else {
if (items2.children.length > 0) {
items2.children.forEach((items3) => {
if (items3.name.search(val) != -1) {
console.log("455")
data1.push(items3);
this.datatree.push(items3.id);
} else {
if (items3.children.length > 0) {
items3.children.forEach((items4) => {
if (items4.name.search(val) != -1) {
data1.push(items4);
this.datatree.push(items4.id);
} else {
if (items4.children.length > 0) {
items4.children.forEach((items5) => {
if (items5.name.search(val) != -1) {
data1.push(items5);
this.datatree.push(items5.id);
}
});
}
}
});
}
}
});
}
}
});
}
}
});
this.dataall = data1;
}else{
this.dataall = this.data;
this.datatree.push(this.data[0].id);
}
},
childData:function(a,b){
//this.form.push(this.dates)
that = this;
this.dataall=this.childData
this.data=this.childData
this.datatree.push(this.data[0].id)
},
form:function(a,b){
this.$emit("datas",a)
}
},
created () {
this.form.push(this.dates)
},
methods: {
getinfo(node){
this.value=node.name
this.form=[]
if(node.level=="L5"){
this.form.push(node.name)
this.$emit("data",node)
}
},
//下拉框获取焦点
Focus(){
if(typeof(this.selectFocus)==='function'){ this.selectFocus();}
},
filterNode(value, data) {
if (!value) return true;
return data[this.name].indexOf(value) !== -1;
},
}
};
</script>
<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;
}
</style>
<selects
:childData="datatrees"
:dates="dataals.refStandard"
:name="name"
:code="code"
:childrenName="childrenName"
@data="getData"
@datas="getdatas"
:chooseparent="true"
/>
