<template>
<el-select
v-model="selectList"
placeholder="请选择"
multiple
@change="selectChange"
>
<el-option :value="selectValue" style="height: auto" disabled>
<el-input
size="mini"
placeholder="搜索部门"
v-model="filterText"
>
</el-input>
<el-tree
:data="treeList"
show-checkbox
node-key="oid"
ref="tree888"
highlight-current
check-strictly
:props="defaultProps"
:filter-node-method="filterNode"
@check-change="handleCheckChange"
>
</el-tree>
</el-option>
</el-select>
</template>
<script>
export default {
props: {
treeList: {
type: Array,
default: () => []
},
},
data() {
return {
defaultProps: {
label: 'deptName',
children: 'children'
},
selectList: [],
selectValue: [],
filterText: ""
}
},
mounted () {
this.$on('change', function() {
this.handleCheckChange()
})
},
watch: {
filterText(val) {
this.$refs.tree888.filter(val);
}
},
methods: {
// select框值改变时候触发的事件
selectChange(e) {
var arrNew = []
var dataLength = this.selectValue.length
var eleng = e.length
for (let i = 0; i < dataLength; i++) {
for (let j = 0; j < eleng; j++) {
if (e[j] === this.selectValue[i].deptName) {
arrNew.push(this.selectValue[i])
}
}
}
this.$refs.tree888.setCheckedNodes(arrNew) //设置勾选的值
},
// tree888选择改变时候触发的事件
handleCheckChange() {
let res = this.$refs.tree888.getCheckedNodes()
let arrLabel = []
let arr = []
res.forEach((item) => {
arrLabel.push(item.deptName)
arr.push(item)
});
this.selectValue = arr
this.selectList = arrLabel
},
// tree888搜索
filterNode(value, data) {
if (!value) return true
return data.deptName.indexOf(value) !== -1
}
}
}
</script>
el-select嵌套el-tree 封装成组件
于 2022-08-25 19:52:32 首次发布