Vue树形数据处理(js)

DesGemini 发布于2019-08-26 10:45 / 1006人阅读

摘要：当前需求层级列表中选中某个元素则获取最底层子集并用逗号连接数据形式遍历方法可参考，写的很详细具体操作首先找到选择元素的在树形数据中的位置，并获取他找寻相同的的元素找寻他的最底层子元素，也就是所有没有子集的元素找当前的子元素的

当前需求:层级列表中选中某个元素,则获取最底层子集id,并用逗号连接(1,2,3,4,5);

数据形式:

let data = [{
            id:"1",
            children:[{
                id:"11",
                children:[{
                    id:"111",
                    children:null
                },
                {
                    id:"112",
                    children:null
                },
                {
                    id:"113",
                    children:null
                }]
            },
            {
                id:"12",
                children:[{
                    id:"121",
                    children:null
                },
                {
                    id:"122",
                    children:null
                },
                {
                    id:"123",
                    children:null
                }]
            }]

        }];

遍历方法可参考:https://blog.csdn.net/chaos_h...，写的很详细
具体操作：首先找到选择元素的id在树形数据中的位置，并获取他

找寻id相同的的元素

findSameId(tree, id) {
            let isGet = false;
            let retNode = null;
            function deepSearch(tree, id) {
                for (var i = 0; i < tree.length; i++) {
                    if (tree[i].children && tree[i].children.length > 0) {
                        deepSearch(tree[i].children, id);
                    }
                    if (id === tree[i].id || isGet) {
                        isGet || (retNode = tree[i]);
                        isGet = true;
                        break;
                    }
                }
            }
            deepSearch(tree, id);
            return retNode;
        };

找寻他的最底层子元素，也就是所有没有子集的元素

找当前id的子元素的id

findChildId(data) {
            console.log(data, 678);
            console.log(data.children, 678);

            if (data.children !== null) {
                for (let i = 0; i < data.children.length; i++) {
                    console.log(data.children[i], i);
                    const childrens = data.children[i];

                    if (childrens.hasOwnProperty("children") && childrens.children && childrens.children.length !== 0) {
                        console.log("-------");

                        console.log(childrens, i);
                        console.log("-------");

                        this.findChildId(childrens);
                    } else {
                        this.sideIds.push(childrens.id);
                    }
                   
                }
            } else {
                this.sideIds.push(data.id);
            }
        }

### 由于本身是vue下的处理 handleSelectDept是触发点击获取到对应id; this.sideIds是本身在data里里定义了的

data(){
            return{
                sideIds:[]
            }
        }

触发效果

handleSelectDept(key) {
            this.sideIds = [];//每次点击需要把本身的sideIds清空
            const dataId = this.findSameId(this.treeData, key);
            this.findChildId(dataId);
            console.log(this.sideIds, 9999)
            this.$set(this.queryForm, "depIds", this.sideIds.join(","));
            console.log(this.queryForm, 989);
            this.getTableData();
        }

云服务器 GPU云服务器 js 树形菜单数据 js 树形数据遍历 js+加树形数据 js 加树形数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106719.html

基于vue.js实现树形表格的封装

摘要：此页面是实现树表格的关健页面。这里就是关健点，因为这个子组件是需要递归实现，所以，需要动态注册到当前组件中。补充一点不要只看部分，部分才是这个树表格的关健所在。基于vue.js实现树形表格的封装（vue-tree-table）前言由于公司产品（基于vue.js）需要，要实现一个树形表格的功能，百度、google找了一通，并没有发现很靠谱的，也不是很灵活。所以就用vue自己撸了一个...

yedf 2019-08-26 12:09 评论0 收藏0
vue-orgchart: 可编辑，可导出 JSON 的树形组织图

摘要：调研最近公司有个需求，做一个可编辑的树形组织图。前言首先感谢的如果你想用的封装，可以直接用我的项目功能格式导入导出树形关系图支持树形关系图导出图片可拖拉树形关系图可编辑树形关系图预览项目地址文档地址调研最近公司有个需求，做一个可编辑的树形组织图。我第一个想到的是ECharts，可当时并没有（最近一个版本出了树图也不是组织图）；然后想到了AntV G6（上手难度有点大也不是组织图）；...

lidashuang 2019-08-22 11:15 评论0 收藏0
vue树形菜单

摘要：树形菜单由于项目原因，没有使用框架上的树形菜单，所以自己动手并参考大佬的代码写了一个树形菜单的组件，话不多说，直接上代码。 vue树形菜单由于项目原因，没有使用ui框架上的树形菜单，所以自己动手并参考大佬的代码写了一个树形菜单的组件，话不多说，直接上代码。html代码showImg(https://segmentfault.com/img/bV5Bq4?w=1015&h=269);j...

BlackHole1 2019-08-22 15:21 评论0 收藏0
vue树形菜单

摘要：树形菜单由于项目原因，没有使用框架上的树形菜单，所以自己动手并参考大佬的代码写了一个树形菜单的组件，话不多说，直接上代码。 vue树形菜单由于项目原因，没有使用ui框架上的树形菜单，所以自己动手并参考大佬的代码写了一个树形菜单的组件，话不多说，直接上代码。html代码showImg(https://segmentfault.com/img/bV5Bq4?w=1015&h=269);j...

phoenixsky 2019-08-01 18:41 评论0 收藏0
vue+element tree(树形控件数据格式)组件(1)

摘要：树形控件数据格式组件最近做了第一个组内可以使用的组件，虽然是最简版，也废了不少力。让我来记录这个树形组件的编写过程和期间用到的知识点。 vue+element tree(树形控件数据格式)组件(1), 最近做了第一个组内可以使用的组件，虽然是最简版，也废了不少力。各位前辈帮我解决问题，才勉强搞定。让我来记录这个树形组件的编写过程和期间用到的知识点。首先说说需求，就是点击出现弹窗+蒙板...

Pines_Cheng 2019-08-02 16:05 评论0 收藏0