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

首先说说需求,就是点击出现弹窗+蒙板,弹窗内容是一个树组件当然,什么弹窗大小啊,是否显示多选框,默认选中,通过关键字过滤节点(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;
}

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

toTreeData(this.data,"id","pid","label")//这样调用就好使了

这个回调函数作用当然是转换数组的格式

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

 

vue+element tree(树形控件)组件(1)的更多相关文章

  1. vue+element tree(树形控件)组件(2)

    今天记录组件的代码和一个调用它的父组件的代码,接口接收数据直接传element直接能用的,也就是经过上一章函数处理过的数据以下是代码 父组件 <template> <commonfi ...

  2. 不依任何赖第三方,单纯用vue实现Tree 树形控件

    这几天接到一个需求,里面有需要做一个属性组件,找的第三方的,但是不能完全满足我的需求,有这时间,我就自己做个小轮子吧. 先看效果图(红点之前用的字体图标,是个对号,这里为了方便,用圆圈代替了选中状态, ...

  3. vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解

    做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...

  4. Element ui tree树形控件获取当前节点id和父节点id

    低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...

  5. vue_elementUI_ tree树形控件 获取选中的父节点ID

    el-tree 的 this.$refs.tree.getCheckedKeys() 只可以获取选中的id 无法获取选中的父节点ID想要获取选中父节点的id;需要如下操作1. 找到工程下的node_m ...

  6. ElementUI Tree树形控件renderContent return时报错

    问题描述: 使用Tree树形控件使用render-content渲染时return后报错或npm run dev时候报错,报错信息相同,如下: 问题分析: renderContent函数中需要使用js ...

  7. BootstrapBlazor实战 Tree树形控件使用(2)

    继续上篇实战BootstrapBlazor树型控件Tree内容, 本篇主要讲解整合Freesql orm快速制作数据库后台维护页面 demo演示的是Sqlite驱动,FreeSql支持多种数据库,My ...

  8. BootstrapBlazor实战-Tree树形控件使用(1)

    实战BootstrapBlazor树型控件Tree的使用, 以及整合Freesql orm快速制作数据库后台维护页面 demo演示的是Sqlite驱动,FreeSql支持多种数据库,MySql/Sql ...

  9. Element ui 使用 Tree 树形控件

    使用树形控件需要映入 jsx才能运行链接:https://github.com/vuejs/babel-plugin-transform-vue-jsx#usage npm install\ babe ...

随机推荐

  1. LeetCode No.106,107,108

    No.106 从中序与后序遍历序列构造二叉树 题目 根据一棵树的中序遍历与后序遍历构造二叉树. 注意:你可以假设树中没有重复的元素. 示例 例如,给出 中序遍历 inorder = [9,3,15,2 ...

  2. python学习笔记(18)字典和json 的区别 和转换

    字典和json 的区别 和转换 前言:字典和json非常像.接下来比较一下两者的异同 先看一下字典的写法: a = {'a':'1', 'b':'2', 'c':'3' } 再看一下json的写法: ...

  3. Python实现求1-1000以内的素数

    def func(): for i in range(2,1000): # count表示被整除的次数 count = 0 for j in range(1,i+1): if i%j==0: coun ...

  4. fidder 抓包工具设置只拦截指定ip(服务ip)

    直接上图:

  5. spring boot 测试插件使用及result风格实例1&打包启动

    本节主要内容: 1:spring boot 小插件使用 2:构建第一个简单的result风格的实例并访问 3:将项目打成jar包后启动并访问. 一:添加boot devtools插件: 执行完成后,查 ...

  6. Critical-Value|Critical-Value Approach to Hypothesis Testing

    9.2 Critical-Value Approach to Hypothesis Testing example: 对于mean 值 275 的假设: 有一个关于sample mean的distri ...

  7. JavaScript学习总结(三)BOM和DOM详解

    转自:http://segmentfault.com/a/1190000000654274 DOM介绍 D(文档)可以理解为整个Web加载的网页文档,O(对象)可以理解为类似window对象只来的东西 ...

  8. python3下scrapy爬虫(第四卷:初步抓取网页内容之抓取网页里的指定数据延展方法)

    上卷中我运用创建HtmlXPathSelector 对象进行抓取数据: 现在咱们再试一下其他的方法,先试一下我得最爱XPATH 看下结果: 直接打印出结果了 我现在就正常拼下路径 只求打印结果: 现在 ...

  9. Jmeter之CSV文件读取

    注意execl表生成的CSV文件的文件编码是GB2312和分隔符就好了

  10. Problem 43 // Project Euler

    Sub-string divisibility The number, 1406357289, is a 0 to 9 pandigital number because it is made up ...