vue+Element实现Tree树形数据展示

电玩女神 2023-01-21 04:29 226阅读 0赞

vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。

推荐指数：star:62.1k  
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]

![b6345aacebb7bafb30ea20bb68ccd962.png][]

今天就来说一下，怎么使用Tree Table 树形表格。废话不多说，首先看一下官方文档吧，看看官方文档是怎么给到的例子吧：

组件：https://element.eleme.cn/\#/zh-CN/component/tree

静态  
在文档上选一颗自己想要的树的demo

<template>
      <div class="grid-content bg-purple">
        <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[2, 3]"
          :default-checked-keys="[5]"
        >
        </el-tree>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          data: [
            {
              id: 1,
              label: "一级 2",
              children: [
                {
                  id: 3,
                  label: "二级 2-1",
                  children: [
                    {
                      id: 4,
                      label: "三级 3-1-1",
                    },
                    {
                      id: 5,
                      label: "三级 3-1-2",
                      disabled: true,
                    },
                  ],
                },
                {
                  id: 2,
                  label: "二级 2-2",
                  disabled: true,
                  children: [
                    {
                      id: 6,
                      label: "三级 3-2-1",
                    },
                    {
                      id: 7,
                      label: "三级 3-2-2",
                      disabled: true,
                    },
                  ],
                },
              ],
            },
          ],
          defaultProps: {
            children: "children",
            label: "label",
          },
        };
      },
    };
    </script>

效果是这个样子的  
![70e2f47121def72ad073504a480bffab.png][]

在实际应用之中，需要从后端请求过来json数据，然后再对json数据进行一些处理，渲染在界面。  
我这里有一些json数据，但是并不是我想要的格式，并不是以上代码中的格式，需要做一些处理，对json的格式的转化。

json数据

{
    	"msg": "success",
    	"code": 1,
    	"data": [{
    		"id": 1,
    		"organName": "住部门",
    		"parentId": null,
    		"manager": "zs",
    		"phone": null,
    		"companyId": 1,
    		"address": null
    	}, {
    		"id": 19,
    		"organName": "uiui",
    		"parentId": 1,
    		"manager": "iuui",
    		"phone": "ui",
    		"companyId": 1,
    		"address": null
    	}, {
    		"id": 20,
    		"organName": "3223",
    		"parentId": 19,
    		"manager": "32",
    		"phone": "3232",
    		"companyId": 1,
    		"address": null
    	},  {
    		"id": 22,
    		"organName": "测试部",
    		"parentId": 1,
    		"manager": "李云泥",
    		"phone": "18117166505",
    		"companyId": 1,
    		"address": null
    	}, {
    		"id": 23,
    		"organName": "123",
    		"parentId": 19,
    		"manager": "1",
    		"phone": "12",
    		"companyId": 1,
    		"address": null
    	}, {
    		"id": 24,
    		"organName": "www",
    		"parentId": 19,
    		"manager": "",
    		"phone": "",
    		"companyId": 1,
    		"address": null
    	}]
    }

动态demo如下：

<template>
      <div class="grid-content bg-purple">
        <el-tree
          :data="treeData"
          show-checkbox
          node-key="id"
          ref="tree"
          highlight-current
          :props="defaultProps"
         
        >
        </el-tree>
      </div>
    </template>
    <script>
    //调用接口
    import { getQuerycheckList } from "@/api/data/organ";
    export default {
      data() {
        return {
          setTree: [],
          defaultProps: {
            children: "children",
            label: "organName",
          },
    
          treeData: [],
          organList: [],
        };
      },
    
      created() {
        //加载部门管理节点接口定义
        this.getQuerycheckList();
      },
    
      methods: {
        //部门管理节点接口定义
        getQuerycheckList() {
          const params = {};
          this.dataLoading = true;
          getQuerycheckList(params).then((res) => {
            this.setTree = res.data;
            this.organList = res.data.map((a) => ({
              label: a.organName,
              value: a.id,
            }));
            //debugger;
            this.getListData();
            this.dataLoading = false;
          });
        },
    
        //对json的格式的转化
        getListData() {
          let dataArray = [];
          this.setTree.forEach(function (data) {
            //  debugger;
            let parentId = data.parentId;
            if (parentId === null) {
              let objTemp = {
                id: data.id,
                organName: data.organName,
                manager: data.manager,
                phone: data.manager,
                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,
                  organName: data.organName,
                  manager: data.manager,
                  phone: data.phone,
                  parentId: parentId,
                };
                childrenArray.push(objTemp);
              }
            }
            dataArrayIndex.children = childrenArray;
            if (childrenArray.length > 0) {
              this.data2treeDG(datas, childrenArray);
            }
          }
          return dataArray;
        },
      },
    };
    </script>

![b0981b2df4fc69c5e2a05ba55f439f2a.png][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[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
[b6345aacebb7bafb30ea20bb68ccd962.png]: /images/20221020/ff8163abf2394c1685e3554cf9d1ee9c.png
[70e2f47121def72ad073504a480bffab.png]: /images/20221020/eb4a26c9a8d840029caf0ffe77227b1b.png
[b0981b2df4fc69c5e2a05ba55f439f2a.png]: /images/20221020/ca71ec3a27954459954a7d6f05f1871a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20221020/6de35bbd0b18460994832f47ba0c2682.png