vue+Element实现tree树形数据展示
组件: Element(地址:http://element.eleme.io/#/zh-CN/component/tree):Tree树形控件
<el-tree ref="expandMenuList" class="expand-tree"
:data="setTree"
highlight-current
:props="defaultProps"
:expand-on-click-node="false"
:render-content="renderContent"
@node-click="handleNodeClick">
</el-tree>
renderContent:内容渲染 props:数据配置 node-click:节点被点击时的回调 1)请求方式:Vue-resource
export const list = flag=> {
return http.post(`/Search/list`, flag).then(res => res.data)
}
2)通过后台接口获取数据
getDataList(){
this.loading = true; //element loading加载
list({ }).then(res => {
this.loading = false;
if (res.status) {
this.setTree= res.data
}
else {
this.$alert(res.message, "错误", {
confirmButtonText: "确定"
});
}
});
}
3)返回数据:parentId等于0的是父级,id等于parentId的是子级
[
{
"id":13,
"parentId":0,
"order":1,
"name":"truck",
},
{
"id":16,
"pluginId":null,
"parentId":0,
"order":1,
"name":"sca",
},
{
"id":17,
"pluginId":6,
"parentId":16,
"order":1,
"name":"abcf",
}
]
4)转换为json树形结构 (方法放在methods里面)
methods: {
getListData() {
let dataArray = [];
this.datas.forEach(function (data) {
if(data.enabled==true){
let parentId = data.parentId;
if (parentId == 0) {
let objTemp = {
id: data.id,
name: data.name,
order: data.order,
parentId: parentId,
}
dataArray.push(objTemp);
}
}
})
this.data2treeDG(this.datas, dataArray)
},
data2treeDG(datas, dataArray) {
for (let j = 0; j < dataArray.length; j++) {
let dataArrayIndex = dataArray[j];
let childrenArray = [];
let Id = dataArrayIndex.id;
for (let i = 0; i < datas.length; i++) {
let data = datas[i];
if(data.enabled==true){
let parentId = data.parentId;
if (parentId == Id) {//判断是否为儿子节点
let objTemp = {
id: data.id,
name: data.name,
order: data.order,
parentId: parentId,
}
childrenArray.push(objTemp);
}
}
}
dataArrayIndex.children = childrenArray;
if (childrenArray.length > 0) {//有儿子节点则递归
this.data2treeDG(datas, childrenArray)
}
}
this.setTree = dataArray;
return dataArray;
},
}
5)格式化后的树形结构数据(setTree):
[
{ "id":44,
"name":"扫描w2",
"order":1,
"parentId":0,
"children":[
{ "id":125,
"name":"plplupluppluplplupl",
"order":2,
"parentId":44,
"children":[
"id":44,
"name":"plplupluppluplplupl",
"order":2,
"parentId":44
]
},
{
"id":124,
"name":"pluginplugin",
"order":2,
"parentId":44,
"children":[ ]
}
]
}
]
6)渲染
methods: {
showOrEdit(data) {
debugger;
if (this.isEdit) {
return <input type="text" style="width:80px" value={data.Name} on-blur={ev => this.edit_sure(ev, data)}/>
}
else{
return <span>{data.Name}</span>
}
},
renderContent(h, {node, data, store}) {
if(data.enabled==true&&data.parentId==0){
return (
<span>
<span>
{ this.showOrEdit(data) }
</span>
<span style="margin-left: 15px;">
<i class="el-icon-plus" on-click={ () => this.NodeAdd(node, data) }></i>
</span>
</span>)
}
else if(data.enabled==true&&data.parentId!=0){
return (
<span>
<span>
{ this.showOrEdit(data) }
</span>
</span>)
}
else {
return (
<span>
<span style="color: red;">
{ this.showOrEdit(data) }
</span>
</span>)
}
}
}
}
vue+Element实现tree树形数据展示的更多相关文章
- Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
- vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解
做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...
- vue+echarts+datav大屏数据展示及实现中国地图省市县下钻
随着前端技术的飞速发展,大数据时代的来临,我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏,可以直观的展示用户想要的数据,同时炫酷的界面也会深受客户的喜欢. 大屏展示其实就是一堆的图表能够 ...
- Element ui tree树形控件获取父节点id
Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 这种只有在所有子级都被选中的 ...
- Vue+element UI实现表格数据导出Excel组件
介绍 这是一个可以将页面中的表格数据导出为Excel文件的功能组件,该组件一般与表格一起使用,将表格数据传给组件,然后通过点击组件按钮可将表格中的数据导出成Excel文件. 使用方法 由于封装该组件内 ...
- vue+element 给表格添加数据,页面不实时刷新的问题
由于页面加载时,使用了keep-alive,keep-alive具有数据缓存作用,当在添加页面添加成功时,返回主页面没有立即更新.数据有缓存. 解决办法如下: 将获取数据列表的方法放到activate ...
- 转:vue+element实现树形组件
项目中需要用到树形组件,在网上发现一个用vue+element实现的树形组件,现在记录下: demo地址:https://github.com/wilsonIs/vue-treeSelect
- element-ui tree树形组件自定义实现可展开选择表格
最近做项目遇到一个需求,表格里可以展开,可以选择,大概效果如下图: 一开始是在table组件里找方法,使用了表格的合并方法,效果是实现了,但是表格的多选每次触发时,都会执行好几次,而且没法实现一部分的 ...
- VUE+Element 前端应用开发框架功能介绍
前面介绍了很多ABP系列的文章<ABP框架使用>,一步一步的把我们日常开发中涉及到的Web API服务构建.登录日志和操作审计日志.字典管理模块.省份城市的信息维护.权限管理模块中的组织机 ...
随机推荐
- Python笔记(六)
# -*-coding:utf-8-*- # 模块 # 模块是一个Python文件,以.py结尾,能让你有逻辑的组织Python代码 # 可以通过import引入模块 import Course_5 ...
- jsoup HTML parser hello world examples--转
原文地址:http://www.mkyong.com/java/jsoup-html-parser-hello-world-examples/ Jsoup, a HTML parser, its “j ...
- 视图 Model转集合
@{ Layout = null;}@using MvcApplication2.Models <!DOCTYPE html> <html><head> ...
- HD-ACM算法专攻系列(22)——Max Sum
问题描述: AC源码: 此题考察动态规划,解题思路:遍历(但有技巧),在于当前i各之和为负数时,直接选择以第i+1个为开头,在于当前i各之和为正数时,第i个可以不用作为开头(因为前i+1个之和一定大于 ...
- IIS之虚拟目录学习
从刚实习开始就了解到虚拟目录这个词,但是一直没去研究过什么意思,而且也没实际用过.一晃两年过去了,今天正好趁休息,补补脑学习下. 通过百度了解到,虚拟目录创建的目的是为了应对磁盘容量爆满,部署的网站不 ...
- CentOS 5/6 下添加epel源
如果既想获得 RHEL 的高质量.高性能.高可靠性,又需要方便易用(关键是免费)的软件包更新功能,那么 Fedora Project 推出的 EPEL(Extra Packages for Enter ...
- Powerpivot PowerBI相关组件下载安装(附操作截图)
加载方式:com加载项加载方法: 点击Excel界面[文件]→[选项]→[加载项]→[COM加载项]→[转到] Excel2013加载PowerView Excel216PowerQuery不需要加载 ...
- js浏览器问题
前段时间做了个项目,里面关于手机移动端下载的问题 开始是判断微信.ios和android系统的下载 因为微信屏蔽点击事件和链接的缘故,需要通过打开新页面来进行下载 ios和android的下载分别为不 ...
- [实验楼]python11期--NO.1(未完成)
tuple 是 Python 的一种不可变数据类型,用于列表数据一旦初始化就不会再修改的场景.tuple 只能通过位置索引去访问里面的元素,但有时候我们需要给每个元素取个别名,以便通过别名去获取对应的 ...
- Pyhton学习——Day25
#面向对象的几个方法#1.静态方法@staticmethod,不能访问类属性,也不能访问实例属性,只是类的工具包#2.类方法:@classmethod,在函数属性前加上类方法,显示为(cls)代表类, ...