vue+Element实现Tree树形（是否默认展开所有节点属性: default-expand-all）

淩亂°似流年 2023-01-17 08:47 164阅读 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]

![055e02f6f0d18e4a14e1d2dc10d44a85.png][]

今天就来说一下，怎么使用Tree Table 树形表格。废话不多说，首先看一下官方文档吧，看看官方文档是怎么给到的例子吧：  
组件：[https://element.eleme.cn/\#/zh-CN/component/tree][https_element.eleme.cn_zh-CN_component_tree]

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

静态  
在文档上选一颗自己想要的树的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>

效果是这个样子的

![f975124498078ea097080c3bc16f2f38.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
          default-expand-all
          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>

![27d5ce793921c04d0572951aa4f40802.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
[055e02f6f0d18e4a14e1d2dc10d44a85.png]: /images/20221021/2c6ac1d45a2d49b998c7c52aa170a86e.png
[https_element.eleme.cn_zh-CN_component_tree]: https://links.jianshu.com/go?to=https%3A%2F%2Felement.eleme.cn%2F%23%2Fzh-CN%2Fcomponent%2Ftree
[f975124498078ea097080c3bc16f2f38.png]: /images/20221021/8344dabf7c7044f38f11161cf8f1ff7a.png
[27d5ce793921c04d0572951aa4f40802.png]: /images/20221021/3d101cd41c264784805e40d9960f5eea.png