<template>
<div class="tree-select-demo">
<el-tree-select
v-model="selectedIds"
:data="treeData"
:props="treeProps"
placeholder="请选择节点"
style="width: 300px"
multiple
check-on-click-node
collapse-tags
clearable
></el-tree-select>
<div class="selected-info">
<p>已选中的节点ID：{{ selectedIds }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
// 选中的节点ID数组（multiple模式下）
selectedIds: [],
// 树节点配置
treeProps: {
children: 'children',
label: 'label',
value: 'id'
},
// 树结构数据
treeData: [
{
id: 1,
label: '父节点1',
children: [
{ id: 11, label: '子节点1-1' },
{ id: 12, label: '子节点1-2' },
{
id: 13,
label: '子节点1-3',
children: [
{ id: 131, label: '孙节点1-3-1' },
{ id: 132, label: '孙节点1-3-2' }
]
}
]
},
{
id: 2,
label: '父节点2',
children: [
{ id: 21, label: '子节点2-1' },
{ id: 22, label: '子节点2-2' }
]
}
]
};
}
};
</script>
<style scoped>
.tree-select-demo {
padding: 20px;
}
.selected-info {
margin-top: 20px;
padding: 10px;
border: 1px solid #e4e7ed;
border-radius: 4px;
}
</style>
