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

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

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


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

组件: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>

效果是这个样子的


在实际应用之中,需要从后端请求过来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>

相关文章
|
2月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
2月前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
2月前
|
JavaScript 前端开发 UED
vue 提高 tree shaking 的效果
【10月更文挑战第23天】提高 Vue 中 Tree shaking 的效果需要综合考虑多个因素,包括模块的导出和引用方式、打包工具配置、代码结构等。通过不断地优化和调整,可以最大限度地发挥 Tree shaking 的优势,为 Vue 项目带来更好的性能和用户体验。
|
2月前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。
|
3月前
|
监控 JavaScript 开发者
在 Vue 中,子组件为何不可以修改父组件传递的 Prop,如果修改了,Vue 是如何监控到属性的修改并给出警告的
在 Vue 中,子组件不能直接修改父组件传递的 Prop,以确保数据流的单向性和可预测性。如果子组件尝试修改 Prop,Vue 会通过响应式系统检测到这一变化,并在控制台发出警告,提示开发者避免这种操作。
|
3月前
|
JavaScript 前端开发 开发者
VUE学习一:初识VUE、指令、动态绑定、计算属性
这篇文章主要介绍了Vue.js的基础知识,包括初识Vue、指令如v-for、v-on的使用、动态属性绑定(v-bind)、计算属性等概念与实践示例。
70 1
|
3月前
|
缓存 JavaScript 前端开发
探索Vue.js中的计算属性与侦听器
【10月更文挑战第5天】探索Vue.js中的计算属性与侦听器
34 1
|
3月前
|
缓存 JavaScript Serverless
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
196 0
|
3月前
|
缓存 JavaScript 前端开发
深入理解Vue.js中的计算属性与侦听属性
【10月更文挑战第5天】深入理解Vue.js中的计算属性与侦听属性
45 0
|
3月前
|
缓存 JavaScript 前端开发
探索Vue.js中的计算属性与侦听器:深入理解与实践
【10月更文挑战第5天】探索Vue.js中的计算属性与侦听器:深入理解与实践
33 0