效果图：
<template>
<el-select :size="size" ref="select" :disabled="disabledsl" :class="`lselectCom ${selectClassName}`" clearable v-model="selectVal" @clear="clearHandler" :placeholder="placeholder" :style="selStyle">
<el-input :size="size" placeholder="" suffix-icon="el-icon-search" v-model="filterText"></el-input>
<el-option :value="optionVal" style="height: auto">
<el-tree :data="treeDataFin"
show-checkbox
default-expand-all
node-key="label"
ref="tree"
class="treeClass"
highlight-current
:props="defaultProps"
:filter-node-method="filterNode"
@check-change="handleCheckChange"
>
</el-tree>
<el-button :disabled='disabled' size="mini" type="primary" @click="okBtn">确定</el-button>
<el-button size="mini" @click="clearHandler">清除</el-button>
</el-option>
</el-select>
</template>
<script>
export default {
name:"L-select",
props:{
// checkedArr:this.temObj[column.property],
defaultProps:{
type:Object,
default(){
return {
children: "children",
label: "label"
}
}
},
treeData:{
type:Array,
// required: true,
default(){
return []
}
},
size:{
type:String,
default(){
return "mini"
}
},
selStyle:{
type:String,
default(){
return ""
}
},
placeholder:{
type:String,
default(){
return "请选择"
}
},
pIndex:{
type:Number,
default(){
return 1
}
},
//表格列
column:{
type:Object,
default(){
return {}
}
},
//下拉框输入框内是否展示筛选后数据
showVal:{
type:Boolean,
default(){
return false
}
},
//默认全选数组
checkedArr:{
type:Array,
default(){
return []
}
},
runokBtn:{
type:Boolean,
default(){
return false
}
},
//筛选前后图标
selectClassName:{
type:String,
default(){
return "selectBefore"
}
},
//是否禁用
disabledsl:{
type:Boolean,
default(){
return false
}
},
//初始化数据备份重置
initSelectData:{
type:Array,
default(){
return []
}
}
},
data() {
return {
temObj:[],
selectVal:"",
filterText:"",
searchVarValue:[],
optionVal:"",
treeDataFin:[],
disabled:false,
arrFin:[]
};
},
mounted(){
},
watch: {
//数据过滤
filterText(val) {
this.arrFin=[]
this.$refs.tree.filter(val);
},
//格式化数据
treeData:{
handler(newval){
// console.log(newval,"990909090")
let arr = [];
newval.forEach((item,index)=>{
arr.push({label:item,id:index})
})
// arr.push({label:"",id:10000})
this.treeDataFin = [{label:"全部",children:arr}]
},
immediate:true
},
checkedArr:{
handler(newval){
// console.log(newval,"909090988888880")
this.$nextTick(()=>{
// console.log(newval,"cccccccc")
// this.$refs.tree.filter(newval);
this.$refs.tree.setCheckedKeys(newval)
})
},
immediate:true
},
runokBtn:{
handler(newval){
if(newval){
setTimeout(()=>{
this.selectVal = this.searchVarValue.join(",")
this.$emit("selectVal",this.searchVarValue,this.pIndex,this.column,this.placeholder)
},300)
}
},
immediate:true
}
},
components: {
},
methods:{
okBtn(){
this.filterText=""
if(!this.showVal)this.optionVal = this.searchVarValue.join(",")
this.$emit("selectVal",this.searchVarValue,this.pIndex,this.column,this.placeholder)
},
clearHandler(){
this.searchVarValue=this.initSelectData
// this.optionVal=""
this.filterText=""
this.$nextTick(() => {
this.$refs.tree.setCheckedKeys(["全部"])
setTimeout(()=>{
// console.log(this.searchVarValue,"this.searchVarValuethis.searchVarValuethis.searchVarValuethis.searchVarValue")
this.$emit("selectVal",this.initSelectData,this.pIndex,this.column,this.placeholder,"clear")
})
});
},
filterNode(value, data) {
// this.arrFin=[]
// this.$refs.tree.setCheckedKeys([])
// console.log(value,this.searchVarValue,"-------------")
let arr =[]
if (!value) {
this.arrFin=[]
// if(this.searchVarValue.length==0){
this.$refs.tree.setCheckedKeys(["全部"])
// }
return true
};
if(data.label.toLowerCase().indexOf(value.toLowerCase())!==-1){
this.arrFin.push(data.label)
this.$refs.tree.setCheckedKeys(this.arrFin)
return true;
}
},
handleCheckChange(data, checked, node) {
let res = this.$refs.tree.getCheckedNodes(true, true);
// if (checked) {
// this.$refs.tree.setCheckedNodes([data]);
// }
let arrLabel = [];
res.forEach(item => {
arrLabel.push(item[this.defaultProps.label]);
});
this.searchVarValue = arrLabel
// this.selectVal = arrLabel;
if(arrLabel.length==0){
this.disabled=true
}else{
this.disabled=false
}
},
}
};
</script>
<style lang="less">
.lselectCom{
.el-input__inner:first-child{
background-color:#fff;
// border:0;
padding-left:5px;
}
input::-webkit-input-placeholder{
color:#565555;
font-size: 14px;
text-align:center
}
input::-moz-placeholder{ /* Mozilla Firefox 19+ */
color:#565555;
font-size: 14px;
text-align:center
}
input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
color:#565555;
font-size: 14px;
text-align:center
}
input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
color:#565555;
font-size: 14px;
text-align:center
}
.el-input .el-select__caret.is-reverse{
transform: rotateZ(180deg)!important
}
.el-input .el-select__caret{
transform: rotateZ(0)!important
}
}
.selectAfter .el-icon-arrow-up:before{
content:"e87a";
font-family: "iconfont";
color:#A9A9A9;
font-size: 10px;
// margin-right:12px
}
.selectBefore .el-icon-arrow-up:before{
content:"e65a";
font-family: "iconfont";
color:#A9A9A9;
font-size: 22px;
// margin-right:12px
}
.el-select-dropdown__list{
padding:6px 10px;
.el-input{
margin:10px 0
}
}
.el-select-dropdown__item{
padding:0;
text-align:center
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
background-color:#fff
}
.treeClass{
border:1px solid #eee;
max-height:170px;
overflow:auto
}
.el-button--primary.is-disabled{
box-shadow: 0 0 0 0
}
.el-select-dropdown__wrap.el-scrollbar__wrap{
margin-bottom:0!important
}
</style>
父组件