资讯专栏INFORMATION COLUMN

vue+element tree(树形控件数据格式)组件(1)

Pines_Cheng / 2262人阅读

摘要:树形控件数据格式组件最近做了第一个组内可以使用的组件,虽然是最简版,也废了不少力。让我来记录这个树形组件的编写过程和期间用到的知识点。

vue+element tree(树形控件数据格式)组件(1),

最近做了第一个组内可以使用的组件,虽然是最简版,也废了不少力。各位前辈帮我解决问题,才勉强搞定。让我来记录这个树形组件的编写过程和期间用到的知识点。

首先说说需求,就是点击出现弹窗+蒙板,弹窗内容是一个树组件当然,什么弹窗大小啊,是否显示多选框,默认选中,通过关键字过滤节点(element都自带好了)几个常用功能都封进来,等以后用到别的的时候再往里加。都解决了)

今天先记录处理数据的问题

与后台交流后得知通过接口会拿到这样的数据:

[
            { id: "01", label: "测试活动", pId: "1" },
            { id: "011", label: "测试活动1", pId: "01" },
            { id: "012", label: "测试活动2", pId: "01" },
            { id: "02", label: "测试活动3", pId: "1" },
            { id: "021", label: "测试活动4", pId: "02" },
            { id: "022", label: "测试活动5", pId: "02" },
            { id: "0221", label: "测试活动6", pId: "022" },
            { id: "0222", label: "测试活动7", pId: "022" },
            { id: "0223", label: "测试活动6", pId: "022" },
            { id: "0224", label: "测试活动7", pId: "022" },
            { id: "0225", label: "测试活动6", pId: "022" },
            { id: "0226", label: "测试活动7", pId: "022" },
        ]

而我们查看element的文档会看到想要用他们的插件数据格式是这样的

    [{
        id: 4,
        label: "二级 1-1",
        children: [{
          id: 9,
          label: "三级 1-1-1"
        }, {
          id: 10,
          label: "三级 1-1-2"
        }]
      }]
    }, {
      id: 2,
      label: "一级 2",
      children: [{
        id: 5,
        label: "二级 2-1"
      }, {
        id: 6,
        label: "二级 2-2"
      }]
    }, {
      id: 3,
      label: "一级 3",
      children: [{
        id: 7,
        label: "二级 3-1"
      }, {
        id: 8,
        label: "二级 3-2"
      }]
    }]

那这就要我们处理数据了,先上js代码

// 循环出父节点

export function toTreeData(data,id,pid,name) {
// 建立个树形结构,需要定义个最顶层的父节点,pId是1
    let parent = [];
    for (let i = 0; i < data.length; i++) {

        if(data[i][pid] !== "1"){
        }else{
          let obj = {
            label: data[i][name],
            id: data[i][id],
            children: []
          };
          parent.push(obj);//数组加数组值
        }
        // console.log(obj);
        //  console.log(parent,"bnm");

    }
    children(parent);

// 调用子节点方法,参数为父节点的数组
function children(parent) {
console.log(parent)
      if (data.length !== 0) {
        for (let i = 0; i < parent.length; i++) {
          for (let j = 0; j < data.length; j++) {
            if (parent[i].id == data[j][pid]){
              let obj = {
                label: data[j][name],
                id: data[j][id],
                children: []
              };
              parent[i].children.push(obj);
            }
          }
          children(parent[i].children);
        }
      }
    }
    console.log(parent,"bjil")
    return parent;
  }
  toTreeData(this.data,"id","pid","label")//这样调用就好使了

上面函数接的四个值分别是data所有数据 id id的那个字段名字 pid 父类id的字段名字 name 内容的字段名字 (因为传过来的字段不一定叫 id pid label所以写活的)

  toTreeData(this.data,"id","pid","label")//这样调用就好使了
  //这个回调函数作用当然是转换数组的格式

多带带拿出来这个函数不回调的时候它的作用就是你传入父元素组成的数组,它会把每一个父元素的直属子元素压入父元素的children字段中去,这样我们只需要把新生成的子元素组成的数组当做下一次调用的父元素数组调用这个函数它就会继续往里面深入

原作者文章地址:https://www.cnblogs.com/dongy...

方法二:最近在gayhub上看到的 万能啊这个
getListData(data, config) {
    var id = config.id || "id";
    var pid = config.pid || "pid";
    var children = config.children || "children";
    // var label=config.label || "LctnName";
    var idMap = {};
    var jsonTree = [];
    data.forEach(function (v) {
        idMap[v[id]] = v;
    });
    data.forEach(function (v) {
        var parent = idMap[v[pid]];
        if (parent) {
            !parent[children] && (parent[children] = []);
            parent[children].push(v);
        } else {
            jsonTree.push(v);
        }
    });
    return jsonTree;
}

getListData(
    data.rows, 
    {
        id: "ID",
        pid: "ParentID",
        children: "children"
    }
);

附上gayhub地址 :
把扁平化的数据转换成树形结构的JSON

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

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

相关文章

  • vue+element tree(树形控件数据格式)组件(1)

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

    wangdai 评论0 收藏0
  • 一个基于vueelement-ui的树形穿梭框组件

    摘要:在市面上找到一个好用的树形穿梭框组件都很难,又不想仅仅因为一个穿梭框在之外引入其他重量级插件,因此就有了。版本增加穿梭框左侧右侧数据勾选事件,穿梭框左侧右侧底部。 el-tree-transfer 简介·请先阅读文档及版本说明 因为公司业务使用vue框架,ui库使用的element-ui。在市面上找到一个好用的vue树形穿梭框组件都很难,又不想仅仅因为一个穿梭框在element-ui之...

    Corwien 评论0 收藏0
  • element-ui中el-tree树形控件-树节点的选择(选中当前节点,获取当前id并且获取其父级

    摘要:在的树形控件中默认获取选取当前选中的方法是但是如果子节点不是全部选中的话,父节点算不选中。由于我们一般想要的是就算只选中一个直接点父节点以及其父辈都算选中,所以需要自己写逻辑。 在element-ui的el-tree树形控件中默认获取选取当前选中id的方法是this.$refs.tree.getCheckedKeys();但是如果子节点不是全部选中的话,父节点算不选中。由于我们一般想要...

    MobService 评论0 收藏0
  • 基于vue.js实现树形表格的封装

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

    yedf 评论0 收藏0

发表评论

0条评论

Pines_Cheng

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<