实现效果:
代码:
<template>
<div>
<el-select v-model="value"
multiple
@change="selectChange">
<el-option style="height: auto"
:value="selectedValue">
<el-tree :data="treeData"
:props="defaultProps"
show-checkbox
node-key="id"
ref="tree"
@check-change="handleCheckChange">
</el-tree>
</el-option>
</el-select>
</div>
</template>
<script>
export default {
data () {
return {
value: [],
selectedValue: [],
defaultProps: {
label: 'label',
children: 'children'
},
treeData: [{
id: 1,
label: '一级1',
children: [{
id: 4,
label: '二级1-1',
children: [{
id: 10,
label: '三级1-1'
}]
}, {
id: 6,
label: '二级1-2',
}, {
id: 7,
label: '二级1-3',
}, {
id: 8,
label: '二级1-4',
}, {
id: 9,
label: '二级1-5',
}]
}, {
id: 2,
label: '一级2',
children: [{
id: 5,
label: '二级2-1'
}]
}, {
id: 3,
label: '一级3'
}]
}
},
methods: {
handleCheckChange (data, checked, indeterminate) {
let res = this.$refs.tree.getCheckedNodes(true, true);
let arrLabel = [];
let arr = [];
res.forEach(item => {
arrLabel.push(item.label);
arr.push(item)
})
this.value = arrLabel;
this.selectedValue = arr;
console.log(res)
console.log(data, checked, indeterminate)
},
hanleNodeClick (data) {
console.log(data)
},
loadNode (node, resolve) {
},
selectChange (event) {
// 这个event数组只有label
// 这里主要处理框内选中项的取消选中
let arrNew = [];
this.selectedValue.forEach(item => {
event.forEach(eventItem => {
if (eventItem == item.label) {
arrNew.push(item)
}
})
})
this.$refs.tree.setCheckedNodes(arrNew)
}
}
}
</script>
<style scoped lang="scss">
</style>