树组件根节点+叶节点渲染

冷不防 2023-10-02 13:50 12阅读 0赞

本人使用的是eleme的树组件进行的数据渲染

[Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库![element-logo-small.svg][]https://element.eleme.cn/\#/zh-CN/component/tree][Element - The world_s most popular Vue UI frameworkElement_ Vue 2.0 _element-logo-small.svg_https_element.eleme.cn_zh-CN_component_tree]

var treeData = {};
    $.ajax({
    	url: "/getTreeData",
    	data : {"start":0,"limit":100},
    	dataType : "json",
    	async: false,       //必须同步，否则数据渲染不了
    	success : function(response) {
    		treeData.data = toTree(response.results);
    		S("treepanelid").lazy = false;
    		S("treepanelid").loadData("",a);
    	},
    	error : function(json) {
    	}
    });
    })
    function toTree(results){
        var b=[];
        results.map(((item,index)=>{
    	    b.push(Object.assign({},item,{children:[]}));    //所有节点数据添加子节点数组
        }))
        var rootData = [{menu_id: 0,text: 'root',children:[]}];   //根节点数据
        test ( rootData, b);
        return rootData;
    }
    function test(a,b){
        for(var i=0;i<a.length;i++){
    	    for(var j=0;j<b.length;j++){
    		    if(a[i].menu_id==b[j].parent){   //如果节点a的meun_id等于节点b的parent
    			    a[i].children.push(b[j]);    //将节点b加入到节点a的子节点属性中
    		    }
    	    }
    	    test(a[i].children,b);   //使用递归将子节点加入父节点
        }
    }

[element-logo-small.svg]: https://raw.githubusercontent.com/ElemeFE/element/dev/examples/assets/images/element-logo-small.svg
[Element - The world_s most popular Vue UI frameworkElement_ Vue 2.0 _element-logo-small.svg_https_element.eleme.cn_zh-CN_component_tree]: https://element.eleme.cn/#/zh-CN/component/tree

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关 treeSelect树组件设置父节点禁用

前言：项目开发中需求方提了这样一个需求：下拉框数据是树形结构，但父节点禁止点选，只能点击子节点。毫无疑问，选用的是 `ant design vue` 组件库的 `tre

女爷i/ 2024年03月31日 09:23/ 0 赞/ 42 阅读

相关 LeetCode_二叉树_DFS_中等_129.求根节点到叶节点数字之和

目录 1.题目 2.思路 3.代码实现（Java） 1.题目给你一个二叉树的根节点 root ，树中每个节点都存放有一个 0 到 9 之间的数

绝地灬酷狼/ 2023年10月12日 11:51/ 0 赞/ 24 阅读

相关树组件根节点+叶节点渲染

本人使用的是eleme的树组件进行的数据渲染 [Element - The world's most popular Vue UI frameworkElement，一套为开

冷不防/ 2023年10月02日 13:50/ 0 赞/ 13 阅读

相关 129. 求根到叶子节点数字之和（树）

1.题目描述给定一个二叉树，它的每个结点都存放一个 0-9 的数字，每条从根到叶子节点的路径都代表一个数字。例如，从根到叶子节点路径 1->2->3 代表数字 12

一时失言乱红尘/ 2022年11月21日 04:10/ 0 赞/ 166 阅读

相关 mysql 叶子节点_mysql求某一个根节点所有叶子节点

需求：通过一个user\_id找到它所在的部门，再找到它所在部门的最底层部门，再到这些最底层部门的人user\_id 表信息：部门信息表 CREATE TABLE

骑猪看日落/ 2022年11月05日 03:06/ 0 赞/ 160 阅读

相关 MySQL 确定哪些是叶节点、分子节点、根节点

备注:测试数据库版本为MySQL 8.0 如需要scott用户下建表及录入数据语句，可参考: [scott建表及录入数据sql脚本][scott_sql] 一.需求

小鱼儿/ 2022年11月03日 04:02/ 0 赞/ 131 阅读

相关 Sum Root to Leaf Numbers（C++求根节点到叶节点数字之和）

（1）递归 / Definition for a binary tree node. struct TreeNode {

深碍√TFBOYSˉ_/ 2022年10月18日 12:57/ 0 赞/ 148 阅读

相关 Leetcode 129. 求根节点到叶节点数字之和

题目重述给你一个二叉树的根节点 root ，树中每个节点都存放有一个 0 到 9 之间的数字。每条从根节点到叶节点的路径都代表一个数字：例如，从根节点到叶节点

墨蓝/ 2022年09月05日 05:27/ 0 赞/ 164 阅读

相关 ztree——如何获取当前节点的根节点

<table> <tbody> <tr> <td align="left"><font> 前言</font></td> </tr> </tbody

悠悠/ 2022年03月09日 17:14/ 0 赞/ 368 阅读

相关枚举根节点流程

> stop the world：垃圾回收器在进行GC时会停止其他用户线程，避免在进行垃圾回收时再产生垃圾。 > > 安全点：用户线程并不是刻意随时停下来的，而是在特定的位置

客官°小女子只卖身不卖艺/ 2021年12月19日 19:23/ 0 赞/ 172 阅读