el-select与el-tree结合使用实现树形结构多选框

<el-select v-model="value" multiple placeholder="请选择" :popper-append-to-body="false"
@remove-tag="removetag"  collapse-tags @clear="clearall" clearable >
<el-option :value="selectTree" class="setstyle" disabled>
<el-tree :data="list" :props="defaultProps" ref="tree"
show-checkbox check-strictly :expand-on-click-node="false" node-key="id"
check-on-click-node @check-change="handleNodeClick"></el-tree>
</el-option>
</el-select>

<script>
export default {
data() {
return {
value:[],
selectTree:[],
defaultProps:{
children: 'children',
label: 'label'
},
list: [{
id: 1,
label: '一级 2',
children: [{
id: 3,
label: '二级 2-1',
children: [{
id: 4,
label: '三级 3-1-1'
}, {
id: 5,
label: '三级 3-1-2',
}]
}, {
id: 2,
label: '二级 2-2',
children: [{
id: 6,
label: '三级 3-2-1'
}, {
id: 7,
label: '三级 3-2-2',
}]
}]
}],
}
},
methods: {
handleNodeClick(data,self,child) {
console.log(this.$refs.tree.getCheckedNodes())
let datalist = this.$refs.tree.getCheckedNodes()
this.selectTree = [] //置空
this.value = []
datalist.forEach((item)=>{
this.selectTree.push({id:item.id,label:item.label})
this.value.push(item.label)
})
},
removetag(){
this.selectTree.splice(0,1)
let setlist = this.$refs.tree.getCheckedNodes()
setlist.splice(0,1)
this.$nextTick(() => {
this.$refs.tree.setCheckedNodes(setlist)
})
},
clearall(){
this.selectTree = []
this.$nextTick(() => {
this.$refs.tree.setCheckedNodes([])
})
},
},
}
</script>

.setstyle {
min-height: 200px;
padding: 0 !important;
margin: 0;
overflow: auto;
cursor: default !important;
}