vue3+elementUI-plus el-tree二次封装
{id: 9, label: '三级 1-1-1', parentId:4,hasRight:true},"parentName": "第6组织","parentName": "第6组织","parentName": "第6组织","rootName": "第6组织","rootName": "第6组织","rootName": "第6组织","rootName": "第2组织","leader"
<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": []
}
]
}
更多推荐
所有评论(0)