Element-UI控件Tree实现数据树形结构_elementui前端树形结构如何写-CSDN博客

本文链接：https://blog.csdn.net/jiciqiang/article/details/129840617

本文介绍了在前端开发中，如何将同一级的菜单数据转换为树状结构，利用Element-UI的tree组件和递归函数处理数据，创建了一个具有添加、删除、编辑功能的树形菜单。文章详细展示了从页面布局、模拟数据的创建到递归函数的实现，以及选中节点后显示操作按钮和删除节点的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前端开发中，有时会遇到所有菜单数据在同一级的情况，后端未对数据进行分级处理；但前端渲染需要是树状结构的数据，如何实现数据的树状化？将数组中通过父节点的ID与子节点的parentId关联，通过递归函数来实现。

前端框架这里使用element-ui的tree控件来实现，对其不了解可以去官网查看文档。

地址：Element - The world's most popular Vue UI framework

一、创建页面

这里就不讲vue项目的搭建了，基础不好的，可以去官网查看文档。

首先在src/pages目录中，创建element-trees文件夹，再创建index.vue，代码如下：

<template>
  <div class="tree-container">
  </div>
</template>

<script>
  export default {
    data(){
      return {}
    },
    created() {},
    methods: {}
  }
</script>

<style lang="scss">
</style>

在类选择器tree-container容器中，添加相关按钮和Tree控件，以及给容器添加些样式进行修饰一下，代码如下：

<template>
  <div class="tree-container">
    <div class="top-box">
      <el-button type="primary" size="mini" @click="appendNode">添加菜单</el-button>
      <el-button type="info" size="mini" @click="removeSelected">删除选中项</el-button>
    </div>
    <el-tree
    	ref="tree"
    	:data="treeData"
    	:props="props"
    	accordion
    	show-checkbox
    	node-key="id"
    	default-expand-all
    	:expand-on-click-node="false">
    	<span class="custom-tree-node" slot-scope="{ node, data }">
    		<span>{
  { node.label }}</span>
    		<span>
    			<el-button type="text" size="mini" @click="append(data)">添加</el-button>
    			<el-button type="text" size="mini" @click="editor(data)">修改</el-button>
    			<el-button type="text" size="mini"	@click="remove(node, data)">删除</el-button>
    		</span>
    	</span>
    </el-tree>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        props: {
        	label: 'name',
        	children: 'children'
        },
        treeData: []
      }
    },
    created() {},
    methods: {
      //添加父节点数据
      appendNode(){},
      //添加子项数据
      append(data){},
      //编辑数据
      editor(data){},
      //移出项目
      remove(node, data){},
      //删除选中的节点
      removeSelected(){}
    }
  }
</script>

<style lang="scss">
.tree-container{ width: 360px; font-size: 12px;
  .top-box{ text-align: right; padding-bottom: 20px; }
}
.custom-tree-node {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 8px;
}
</style>

此时页面效果如下：

二、模拟数据

在element-trees文件夹中添加data.js文件，用来存储模拟数据。代码如下：

/**
 * 模拟数据
 */
const dataList = [
  {
    "name