Vue拿到后端返回的List，渲染出element-tree树结构

最新推荐文章于 2024-09-13 22:50:25 发布

qq_36913208

最新推荐文章于 2024-09-13 22:50:25 发布

阅读量5.7k

点赞数 2

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_36913208/article/details/103801464

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前言：

这是我的做法，基本上是搬运官方的办法照葫芦画瓢，我也不知道有没有更好的方法能拿到 tree组件的实例

element-tree 增加节点的方法

如果在模板中定于了 <el-tree>的数据源如下：

<el-tree :data="nodeData"></el>

那么在当前Vue组件实例中定义并初始化数据源

export default {
    name: 'Tree',
    data(){
      return{
        nodeData: [
          {
            id:999,
            labelName:"root",
            children:[]
          }
        ],
      }
    }
}

那么在该 Node.data对象中就具有以三个属性：

$C:\Users\GJS\AppData\Roaming\Typora\typora-user-images$

所以，如果要给节点设置data（数据源）,就只要给节点加入data,下面演示加入data的操作

首先，先设置数据源

let newChild = {};
newChild = {
    id: nodeKeyId += 1, //假设nodeKeyId 已经定义，值可以是动态的
    labelName: "Module", //静态值
    children: []，
    nodeType：""	//也可以在 newChild对象中加入其它属性
};

其次，我们来观察官方解释追加子节点的方法

append()为 Tree 中的一个节点追加一个子节点，接收两个参数(data, parentNode)

要追加的子节点的 data
子节点的 parent 的 data、key 或者 node

既然参数解决了，那么方法就是：使用push方法增加数据源。

在此处我们传的是 node, 此处的 node也就是你要插入的节点的 parent（在该node下插入）

append(node){

    let data = node.data
    /*前提检查,节点需要有children，用于存储子节点的数据源*/
    if (!data.children) {	//如果data.children为空
        this.$set(data, 'children', []); //在data中增加 children属性，并初始化为数组
    }
    data.children.push(newChild); //将你要设置的数据源存储在 parentNode.data.children下
}

Vue中从后台读取后渲染element-tree

如果想在加载后马上渲染，需要指定渲染函数 :render-content="renderContent"

<el-tree :render-content="renderContent" />

renderContent 保存 root节点就行

export default{
    data(){
        return{
            thatNode:Object
        }
    },
    methods:{
	    renderContent(h,{node,data}){
	        if (node.level === 1)
	        {
	          //在无法得到 node 的情况下，往vue实例中保存一个 node，便于进行首次渲染后台来的数据时使用
	          this.thatNode = node;
	         
	        }
	    }
	}
}