<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().success(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": []
        }
    ]
}

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐