Vue+ElementUI 搭建后台管理系统（实战系列五）

亦凉 2022-09-03 14:19 307阅读 0赞

##### 前言 #####

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

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

##### 管理后台解决方案 #####

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

Star指数：69.7k  
Github 地址：[https://github.com/PanJiaChen/vue-element-admin][https_github.com_PanJiaChen_vue-element-admin]  
Demo体验：[https://panjiachen.github.io/vue-element-admin/\#/dashboard][https_panjiachen.github.io_vue-element-admin_dashboard]  
官方文档：[https://panjiachen.github.io/vue-element-admin-site/zh/][https_panjiachen.github.io_vue-element-admin-site_zh]

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

![a85092ee464f5411f45acd9b837f760c.png][]

--------------------

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

首先看文档，重要的话说三遍  
Tree 树形控件：[https://element.eleme.io/\#/zh-CN/component/tree][https_element.eleme.io_zh-CN_component_tree]

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

![d8cdaf046733066844089f1eb5d9f316.png][]

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

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

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

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

![be7386b6cf67837372485497b6427e9d.png][]

image

2：使用  
mock.json

{
        "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`属性来默认展开所有节点。

<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"`事件

//树文件勾选事件
        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 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。

所以  
我们今天使用的还是

:render-content="renderContent"

![7a403834af95877c400b216e1348df42.png][]

image

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

![1dfd89be5b45dfd9efd0ad17f65fd21a.png][]

image

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

isHover: false,

![76f230a72ffd53721afa861037bbb2eb.png][]

image

最后，test.vue

<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>

添加选中的节点的效果

![f67246bdaa388a93e6e94d6446d08b32.png][]

删除掉某个节点的效果

![3a35454ae3a5b029cd33b42dc03be1f6.png][]

图片.png

[https_github.com_PanJiaChen_vue-element-admin]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FPanJiaChen%2Fvue-element-admin
[https_panjiachen.github.io_vue-element-admin_dashboard]: https://links.jianshu.com/go?to=https%3A%2F%2Fpanjiachen.github.io%2Fvue-element-admin%2F%23%2Fdashboard
[https_panjiachen.github.io_vue-element-admin-site_zh]: https://links.jianshu.com/go?to=https%3A%2F%2Fpanjiachen.github.io%2Fvue-element-admin-site%2Fzh%2F
[a85092ee464f5411f45acd9b837f760c.png]: /images/20220829/09c36732a0ec4e15b74496d71e389373.png
[https_element.eleme.io_zh-CN_component_tree]: https://links.jianshu.com/go?to=https%3A%2F%2Felement.eleme.io%2F%23%2Fzh-CN%2Fcomponent%2Ftree
[d8cdaf046733066844089f1eb5d9f316.png]: /images/20220829/abceef3414a04e1883f48465b13677d6.png
[be7386b6cf67837372485497b6427e9d.png]: /images/20220829/c724612530e042d99d7602eb65ca5306.png
[7a403834af95877c400b216e1348df42.png]: /images/20220829/17e0e193ed6d46f9ba41600f1330f48c.png
[1dfd89be5b45dfd9efd0ad17f65fd21a.png]: /images/20220829/e9f20d93f8d44b699d708b3bdafc12ae.png
[76f230a72ffd53721afa861037bbb2eb.png]: /images/20220829/b8f20cb7b14c414f8187dec025869108.png
[f67246bdaa388a93e6e94d6446d08b32.png]: /images/20220829/6d6f83ce8891411f89915522d6b62ba7.png
[3a35454ae3a5b029cd33b42dc03be1f6.png]: /images/20220829/4613223e0faf41b4b07f89f03ed49a7d.png