<template>
<el-tree
:data="treeDatas"
:props="defaultProps"
node-key="id"
@node-click="handleNodeClick"
show-checkbox>
</el-tree>
</template>
<script setup>
import {ref,defineEmits,defineProps} from 'vue';
const emit = defineEmits(['node-click']);
const props = defineProps({
treeData: {type: Array, default: []},
})
const handleNodeClick = (node) => {
emit('node-click', node);
}
// 你的树形数据,每个节点都有一个唯一的 'id' 字段
const treeDatas = ref([
{
id: 1, // 这个值将作为该节点的唯一标识
label: '单位 1',
children: [
{
id: 4,
parentId: 0,
hasRight:false,
label: '二级 1-1',
children: [
{id: 9, label: '三级 1-1-1', parentId:4,hasRight:true},
{id: 10, label: '三级 1-1-2'}
]
}
]
},
{
id: 2,
label: '单位 2',
children: [
{id: 5, label: '二级 2-1'},
{id: 6, label: '二级 2-2'}
]
}
]);
treeDatas.value = props.treeData;
// 定义配置选项,指定如何从节点数据中获取标签和子节点
const defaultProps = {
children: 'children',
label: 'name',
};
</script>
<el-aside style="margin-top: -20px" width="200px"> <UnitTree :data="treeData" @node-click="handleTreeNodeClick"></UnitTree> </el-aside>
const handleTreeNodeClick = (node) => {
console.log("node:", node.id)
defaultEntity.value.parentId = node.id
ctxt.getMessage().su***ess(node.name)
listUnit(refreshTable)
}
{
"code": 0,
"msg": "成功",
"data": [
{
"id": 4,
"rootId": 0,
"parentId": 0,
"name": "中云AI",
"leader": "1",
"phone": "1",
"level": 1,
"fullPath": null,
"isDelete": false,
"sort": 0,
"createId": 13,
"createTime": "2025-08-23 09:55:32",
"parentName": null,
"rootName": null,
"children": []
},
{
"id": 6,
"rootId": 3,
"parentId": 0,
"name": "第5组织",
"leader": "邓111",
"phone": "16148052323",
"level": 3,
"fullPath": null,
"isDelete": false,
"sort": 0,
"createId": 13,
"createTime": "2025-08-23 09:56:30",
"parentName": null,
"rootName": "第2组织",
"children": []
},
{
"id": 7,
"rootId": 0,
"parentId": 0,
"name": "第6组织",
"leader": "邓111",
"phone": "16148052323",
"level": 3,
"fullPath": null,
"isDelete": false,
"sort": 0,
"createId": 13,
"createTime": "2025-08-23 09:57:34",
"parentName": null,
"rootName": null,
"children": [
{
"id": 11,
"rootId": 7,
"parentId": 7,
"name": "3",
"leader": "11",
"phone": "11",
"level": 1,
"fullPath": null,
"isDelete": false,
"sort": 0,
"createId": 13,
"createTime": "2025-08-23 13:18:35",
"parentName": "第6组织",
"rootName": "第6组织",
"children": []
},
{
"id": 12,
"rootId": 7,
"parentId": 7,
"name": "4",
"leader": "11",
"phone": "1111",
"level": 1,
"fullPath": null,
"isDelete": false,
"sort": 0,
"createId": 13,
"createTime": "2025-08-23 13:18:40",
"parentName": "第6组织",
"rootName": "第6组织",
"children": []
},
{
"id": 13,
"rootId": 7,
"parentId": 7,
"name": "11",
"leader": "11",
"phone": "11111",
"level": 1,
"fullPath": null,
"isDelete": false,
"sort": 0,
"createId": 13,
"createTime": "2025-08-23 13:18:45",
"parentName": "第6组织",
"rootName": "第6组织",
"children": []
}
]
},
{
"id": 9,
"rootId": 0,
"parentId": 0,
"name": "1",
"leader": "1",
"phone": "1",
"level": 1,
"fullPath": null,
"isDelete": false,
"sort": 0,
"createId": 13,
"createTime": "2025-08-23 11:33:40",
"parentName": null,
"rootName": null,
"children": []
}
]
}