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是1let 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字段中去，这样我们只需要把新生成的子元素组成的数组当做下一次调用的父元素数组调用这个函数它就会继续往里面深入

转载于:https://www.cnblogs.com/dongyuxin/p/9429362.html

vue+element tree(树形控件)组件(1)相关推荐

vue+element tree(树形控件数据格式)组件(1)
vue+element tree(树形控件数据格式)组件(1), 最近做了第一个组内可以使用的组件,虽然是最简版,也废了不少力.各位前辈帮我解决问题,才勉强搞定.让我来记录这个树形组件的编写过程和期间 ...
Element Tree 树形控件自定义显示样式与hover事件绑定实现添加、删除和修改
Element Tree 树形控件自定义显示样式与hover事件绑定实现添加.删除和修改最近在搞erp项目对应后台的管理功能,为了加速开发使用了 vue-element-admin 开发,使用的是e ...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
Ant Design Vue 中 Tree 树形控件 defaultExpandAll 设置无效
问题: 在代码中设置了default-expand-all属性树形结构还是没有展开原因: 因为default-expand-all属性是用来设置默认值的,而初始值treeData通常情况下是需要调 ...
elementui树状菜单tree_Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）...
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
vue 树形控件可编辑_vue.js element-ui组件改iview 第一期 tree树形控件
此为第一期修改,后期也适配了其他组件,更多查看我得文章 element-ui组件的tree树形控件修改源码改为iview组件实现原理修改了element-ui源码,把源码里面的tree模块提取出来 ...
vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解
做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...
Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
React 组件封装之 Tree 树形控件
React 组件封装之 Tree 树形控件一.Tree 树形结构二.使用案例三.API 使用指南四.源代码五.总结一.Tree 树形结构组件说明: 实现树形控件,适用于组织架构.文章列表 ...
elementui tree获取父节点_vue_elementUI_ tree树形控件获取选中的父节点ID
一, vue_elementUI_ tree树形控件 1.1默认点击tree节点的第一个(注意不是checked选中) :expand-on-click-node="false" ...

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

vue+element tree(树形控件)组件(1)相关推荐

最新文章

热门文章