Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue+ElementUI 搭建后台管理系统(实战系列五)

Vue+ElementUI 搭建后台管理系统(实战系列五)

作者头像
王小婷
发布于 2025-05-20 04:59:16
发布于 2025-05-20 04:59:16
8800
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行
前言

使用ElementUI已经有一段时间了,在一边上手开发后台管理系统的同事,也记录了一些笔记,一直都没有时间将这些零零散散的笔记总结起来,整理成一个比较系统详细一点的教程,可以留着以后来看。

关于开发过程中,确实使用到很大一部分的文档,都说前端开发离不开文档,重要的话说三遍,一定要多看文档。

管理后台解决方案

vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。

Star指数:69.7k Github 地址:https://github.com/PanJiaChen/vue-element-admin Demo体验:https://panjiachen.github.io/vue-element-admin/#/dashboard 官方文档:https://panjiachen.github.io/vue-element-admin-site/zh/

使用建议 本项目的定位是后台集成方案,不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能,会造成不少的代码冗余。如果你的项目不关注这方面的问题,也可以直接基于它进行二次开发。


Vue+ElementUI 搭建后台管理系统(实战系列五)- Elementui Tree 树形控件

首先看文档,重要的话说三遍 Tree 树形控件:https://element.eleme.io/#/zh-CN/component/tree

在文档里面,我们可以get到静态树的基本用法,这里就不复制了。多看几遍也就可以了。

重要的是,Tree 树形控件的交互是怎么做到的,对于后端给的数据,是如何进行处理的,然后一些回显数据,怎么讲勾选选中的节点数据获取到并且提交,鼠标放在节点上的时候,出现删除的符号,删除节点,这些都是需要下功夫研究一下的。

步骤,一步一步的来实现:首先最简单的是数据显示的问题,获取数据之后,怎么才能够渲染成为一颗树。

准备工作 话不多说了,来看具体的操作吧

1:在views底下新建一个test文件夹 里面新建一个vue文件和一个json文件

image

2:使用 mock.json

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    "msg": "success",
    "code": 1,
    "data": [
        {
            "id": 2,
            "permissionToken": "data_spectaculars_token1",
            "description": "数据看板",
            "parentId": 1,
            "checked": true
        },
        {
            "id": 3,
            "permissionToken": "data_spectaculars_stat_token2",
            "description": "统计看板",
            "parentId": 2,
            "checked": true
        },
        {
            "id": 4,
            "permissionToken": "data_spectaculars_health_token2",
            "description": "健康看板",
            "parentId": 2,
            "checked": true
        },
        {
            "id": 1,
            "permissionToken": "system_token0",
            "description": "系统权限",
            "parentId": 0,
            "checked": false
        },
        {
            "id": 5,
            "permissionToken": "account_management_token1",
            "description": "账户管理",
            "parentId": 1,
            "checked": false
        },
        {
            "id": 6,
            "permissionToken": "account_management_user_token2",
            "description": "用户管理",
            "parentId": 5,
            "checked": false
        },
        {
            "id": 7,
            "permissionToken": "account_management_permission_token2",
            "description": "权限管理",
            "parentId": 5,
            "checked": false
        }
    ]
}
默认展开和默认选中

分别通过default-expanded-keys设置默认展开的节点。 需要注意的是,此时必须设置node-key,其值为节点数据中的一个字段名,该字段在整棵树中是唯一的。

我这里的要求是获取到数据之后,将所有的数据默认展开显示直接在el-tree上添加default-expand-all属性来默认展开所有节点。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<el-tree
      :data="treeData"
      show-checkbox
      default-expand-all
      node-key="id"
      ref="tree"
      highlight-current
      :props="defaultProps"
      @check="checkHandler"
    >
    </el-tree>
vue如何获取Elementui Tree 树形控件当前选中的节点

这里需要用到,树文件勾选事件在el-tree上绑定@check="checkHandler"事件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//树文件勾选事件
    checkHandler(...value) {
      let a = value[1].checkedNodes.map((a) => a.description);
      let b = value[1].checkedNodes.map((a) => a.permissionToken);
      console.log(a);
      this.questionForm.description = a;
      this.questionForm.permissionToken = b;
    },
Elementui Tree 树形控件删除子节点

功能:当鼠标划过Tree 树形控件的节点的时候,会出现一个删除的按钮 点击删除按钮,会出现弹框询问是否删除 选中删除,则删除树节点(最上层的父节点不可删除)

1:第一步,当然是添加删除元素了

在文档里面有这样的说明:

可以通过两种方法进行树节点内容的自定义:render-content和 scoped slot。使用render-content指定渲染函数,该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。使用 scoped slot 会传入两个参数node和data,分别表示当前节点的 Node 对象和当前节点的数据。注意:由于 jsfiddle 不支持 JSX 语法,所以render-content示例在 jsfiddle 中无法运行。但是在实际的项目中,只要正确地配置了相关依赖,就可以正常运行。

所以 我们今天使用的还是

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
:render-content="renderContent"

image

直接将文档里面的这个例子,赋值到我们的项目代码里面吧,直接简单且粗暴。

image

需要注意的地方 因为功能是,当鼠标划过树形控件的子节点的时候 才会出现了那个删除的图标 需要在渲染的时候设置一下isHover: false

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
isHover: false,

image

最后,test.vue

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <div class="ztree">
    <el-tree
      :data="treeData"
      show-checkbox
      default-expand-all
      node-key="id"
      ref="tree"
      highlight-current
      :props="defaultProps"
      @check="checkHandler" 
      :render-content="renderContent"
    >
    </el-tree>
    <el-button type="primary" @click="createData()">确定</el-button>
  </div>
</template>
<script>
//调用删除接口
// import { deleteSubject} from "@/api/data/organ";

export default {
  data() {
    return {
      setTree: [],
      defaultProps: {
        children: "children",
        label: "description",
      },
      treeData: [],
      organList: [],
      questionForm: {
      },
    };
  },
 
  created() {
    //加载树节点
    this.getZtreeList();
  },
  methods: {
     renderContent(h, { node, data, store }) {
      console.log(data);
      return (
        <span
          class="custom-tree-node"
          on-mouseenter={() => (data.isHover = true)}
          on-mouseleave={() => (data.isHover = false)}
        >
          <span>{data.description}</span>
          {data.parentId !== 0 && data.isHover && (
            <i
              class="el-icon-error danger"
              on-click={(e) => {
                e.stopPropagation();

                this.remove(node, data);
              }}
            ></i>
          )}
        </span>
      );
    },
    remove(node, data) {
      this.$confirm("此操作将永久删除该条目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.handleDelete(null, data);
          if (data.parentId === 0) {
            return;
          }
          const parent = node.parent;
          const children = parent.data.children || parent.data;
          const index = children.findIndex((d) => d.id === data.id);
          children.splice(index, 1);
          // 发请求删除
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

     //调用删除接口
    handleDelete(index, row) {
     //这里不多说了,根据自己的实际情况,填写删除接口
    },

    //树文件勾选事件
    checkHandler(...value) {
      let a = value[1].checkedNodes.map((a) => a.description);
      let b = value[1].checkedNodes.map((a) => a.permissionToken);
      console.log(a);
      this.questionForm.description = a;
      this.questionForm.permissionToken = b;
    },

    //获取树权限节点接口定义
    getZtreeList() {
      this.dataLoading = true;
      import("./mock").then((res) => {
        this.setTree = res.data;
        this.organList = res.data.map((a) => ({
          label: a.description,
          value: a.id,
        }));

        this.getListData();
        this.dataLoading = false;
      });
    },

    //对json的格式的转化
    getListData() {
      let dataArray = [];
      this.setTree.forEach(function (data) {
        let parentId = data.parentId;
        if (parentId === 0) {
          let objTemp = {
            id: data.id,
            description: data.description,
            permissionToken: data.permissionToken,
            parentId: parentId,
          };

          dataArray.push(objTemp);
        }
      });
      this.treeData = this.data2treeDG(this.setTree, dataArray);
    },
    data2treeDG(datas, dataArray) {
      for (let j = 0; j < dataArray.length; j++) {
        let dataArrayIndex = dataArray[j];
        let childrenArray = [];
        let Id = dataArrayIndex.id;
        for (let i = 0; i < datas.length; i++) {
          let data = datas[i];

          let parentId = data.parentId;
          if (parentId == Id) {
            //判断是否为儿子节点
            let objTemp = {
              id: data.id,
              description: data.description,
              permissionToken: data.permissionToken,
              parentId: parentId,
              isHover: false,
            };
            childrenArray.push(objTemp);
          }
        }
        dataArrayIndex.children = childrenArray;
        if (childrenArray.length > 0) {
          this.data2treeDG(datas, childrenArray);
        }
      }

      return dataArray;
    },

    //添加
    async createData() {
      const params = this.questionForm;
      alert(JSON.stringify(params));
    },
  },
};
</script>
<style lang="scss">
.danger {
  color: red;
}
</style>

添加选中的节点的效果

删除掉某个节点的效果

图片.png

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-05-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Elementui Tree 树形控件删除子节点
要求: Elementui Tree 树形控件,将勾选选中的值放在list集合里面提交
王小婷
2021/11/24
2K0
Elementui Tree 树形控件删除子节点
Elementui Tree 树形控件,将勾选选中的值放在list集合里面提交
要求: Elementui Tree 树形控件,将勾选选中的值放在list集合里面提交
王小婷
2021/11/24
1.3K0
Elementui Tree 树形控件,将勾选选中的值放在list集合里面提交
vue+Element实现Tree树形数据展示
组件:https://element.eleme.cn/#/zh-CN/component/tree
王小婷
2021/04/28
2.1K2
vue+Element实现Tree树形数据展示
Elementui Tree 树形控件删除功能
vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架,这是使用vue技术栈开发的前端程序员的首选管理系统模板,模板以及非常的成熟了,并且有相关的社区和维护人员,开发时候遇到问题也不要慌。
王小婷
2021/07/29
1.3K0
Elementui  Tree 树形控件删除功能
vue如何获取Elementui Tree 树形控件当前选中的节点
vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架,这是使用vue技术栈开发的前端程序员的首选管理系统模板,模板以及非常的成熟了,并且有相关的社区和维护人员,开发时候遇到问题也不要慌。
王小婷
2021/11/24
3.4K0
vue如何获取Elementui Tree 树形控件当前选中的节点
通过el-tree自定义渲染网页版工作目录,实现鼠标悬浮显示完整名称、用icon区分文件和文件夹等需求
最近做项目时需要做一些云原生相关的内容,有个需求要在服务器上做临时文件夹作为工作目录,同时要将工作目录映射到docker image中和前端页面上。那么将服务器的本地工作目录渲染到前端页面上是必须要实现的部分,其中从后端API获取本地目录信息后,将数据渲染成自定义的前端工作目录是篇博客将要谈到的主要内容。
watermelo37
2025/01/22
1260
通过el-tree自定义渲染网页版工作目录,实现鼠标悬浮显示完整名称、用icon区分文件和文件夹等需求
Vue+ElementUI 搭建后台管理系统(实战系列一)
使用ElementUI已经有一段时间了,在一边上手开发后台管理系统的同事,也记录了一些笔记,一直都没有时间将这些零零散散的笔记总结起来,整理成一个比较系统详细一点的教程,可以留着以后来看。
王小婷
2021/11/24
6.3K2
Vue+ElementUI 搭建后台管理系统(实战系列一)
电商后台管理系统——权限管理模块
电商后台管理系统的权限管理模块分为角色列表和权限列表两部分,两部分流程图大概如下
全栈程序员站长
2022/08/29
2.5K0
电商后台管理系统——权限管理模块
Vue+ElementUI 搭建后台管理系统(实战系列四)
使用ElementUI已经有一段时间了,在一边上手开发后台管理系统的同事,也记录了一些笔记,一直都没有时间将这些零零散散的笔记总结起来,整理成一个比较系统详细一点的教程,可以留着以后来看。
王小婷
2021/11/24
1.8K0
Vue+ElementUI 搭建后台管理系统(实战系列四)
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题(六)
当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异。笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方案,希望这个系列能够给小伙伴一些帮助。本系列文章并不是手把手的教程,主要介绍了核心思路并讲解了核心代码,完整的代码小伙伴们可以在GitHub上star并clone下来研究。另外,原本计划把项目跑起来放到网上供小伙伴们查看,但是之前买服务器为了省钱,内存只有512M,两个应用跑不起来(已经有一个V部落开源项目在运行
江南一点雨
2018/04/02
9160
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题(六)
Vue+ElementUI 搭建后台管理系统(实战系列一)
使用ElementUI已经有一段时间了,在一边上手开发后台管理系统的同事,也记录了一些笔记,一直都没有时间将这些零零散散的笔记总结起来,整理成一个比较系统详细一点的教程,可以留着以后来看,正好在掘金上看到了关于8月更文挑战 的活动,看完我心动了,决定花一些时间和精力来参加这次的比较有意义的活动。
王小婷
2025/05/20
3730
Vue+ElementUI 搭建后台管理系统(实战系列一)
【第三篇】商城系统-基础业务-实现类别管理
JDK8特性:https://blog.csdn.net/qq_38526573/category_11113126.html
用户4919348
2022/09/16
1K0
【第三篇】商城系统-基础业务-实现类别管理
java最优化的方法递归构造树形结构
    el-tree是element uI的中树形结构的写法,主要使用的场景是在需要父级和子级的情况下使用,下面看一下前台的写法。
十分钟空间
2022/08/17
3.3K0
java最优化的方法递归构造树形结构
Vue+ElementUI 搭建后台管理系统(实战系列七)
使用ElementUI已经有一段时间了,在一边上手开发后台管理系统的同事,也记录了一些笔记,一直都没有时间将这些零零散散的笔记总结起来,整理成一个比较系统详细一点的教程,可以留着以后来看.
王小婷
2021/11/24
4320
Vue+ElementUI 搭建后台管理系统(实战系列七)
Vue+ElementUI 搭建后台管理系统(实战系列八)
使用ElementUI已经有一段时间了,在一边上手开发后台管理系统的同事,也记录了一些笔记,一直都没有时间将这些零零散散的笔记总结起来,整理成一个比较系统详细一点的教程,可以留着以后来看。
王小婷
2021/11/24
7670
Vue+ElementUI 搭建后台管理系统(实战系列八)
elementUI Tree 树形控件单选实现
义了一个currentNodeKey来存储当前选中节点的 key。每次点击节点时,我们首先检查是否已经有一个节点被选中,如果是,则通过this.$refs.tree.setCurrentKey(null)取消选中它。然后,我们更新currentNodeKey为新选中的节点 key。
肥晨
2024/03/22
1.3K0
Vue+ElementUI 搭建后台管理系统(实战系列三)
使用ElementUI已经有一段时间了,在一边上手开发后台管理系统的同事,也记录了一些笔记,一直都没有时间将这些零零散散的笔记总结起来,整理成一个比较系统详细一点的教程,可以留着以后来看。
王小婷
2021/11/24
1.9K0
Vue+ElementUI 搭建后台管理系统(实战系列三)
element el-tree 默认选中的节点
主要就是这两行代码,需要注意的是setCurrentKey函数必须要放到$nextTick里面,要不然tree还未渲染上,是找不到popularTree的
小蔚
2021/09/14
4.5K0
element el-tree 默认选中的节点
一款轻量级树形控件EasyTreeview
使用方法 引入 <link rel="stylesheet" type="text/css" href="./css/index.min.css"> <div id="tree"></div> <script type="text/javascript" src="./js/index.min.js"></script> <script type="text/javascript"> var tv = new EasyTreeview({ el: 'tree', data: [ {
lonelydawn
2018/03/29
2.3K0
一款轻量级树形控件EasyTreeview
vue+element|el-tree树设置懒加载和设置默认勾选
在实际开发中,很多数据过于庞大,需要分批请求,使用到懒加载。但是在tree的方法中,使用懒加载后无法直接使用default-checked-keys默认勾选。想要这个效果该如何实现?
肥晨
2025/03/06
4250
推荐阅读
相关推荐
Elementui Tree 树形控件删除子节点
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验