组件: 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树形数据展示的更多相关文章

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

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

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

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

  3. vue+echarts+datav大屏数据展示及实现中国地图省市县下钻

    随着前端技术的飞速发展,大数据时代的来临,我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏,可以直观的展示用户想要的数据,同时炫酷的界面也会深受客户的喜欢. 大屏展示其实就是一堆的图表能够 ...

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

    Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 这种只有在所有子级都被选中的 ...

  5. Vue+element UI实现表格数据导出Excel组件

    介绍 这是一个可以将页面中的表格数据导出为Excel文件的功能组件,该组件一般与表格一起使用,将表格数据传给组件,然后通过点击组件按钮可将表格中的数据导出成Excel文件. 使用方法 由于封装该组件内 ...

  6. vue+element 给表格添加数据,页面不实时刷新的问题

    由于页面加载时,使用了keep-alive,keep-alive具有数据缓存作用,当在添加页面添加成功时,返回主页面没有立即更新.数据有缓存. 解决办法如下: 将获取数据列表的方法放到activate ...

  7. 转:vue+element实现树形组件

    项目中需要用到树形组件,在网上发现一个用vue+element实现的树形组件,现在记录下: demo地址:https://github.com/wilsonIs/vue-treeSelect

  8. element-ui tree树形组件自定义实现可展开选择表格

    最近做项目遇到一个需求,表格里可以展开,可以选择,大概效果如下图: 一开始是在table组件里找方法,使用了表格的合并方法,效果是实现了,但是表格的多选每次触发时,都会执行好几次,而且没法实现一部分的 ...

  9. VUE+Element 前端应用开发框架功能介绍

    前面介绍了很多ABP系列的文章<ABP框架使用>,一步一步的把我们日常开发中涉及到的Web API服务构建.登录日志和操作审计日志.字典管理模块.省份城市的信息维护.权限管理模块中的组织机 ...

随机推荐

  1. HDU 1575 矩阵快速幂裸题

    题意:中文题 我就不说了吧,... 思路:矩阵快速幂 // by SiriusRen #include <cstdio> #include <cstring> using na ...

  2. 修改eclipse最近访问的工程的配置文件

    此文件为:org.eclipse.ui.ide.prefs 配置项为:RECENT_WORKSPACES= 示例:RECENT_WORKSPACES=E\:\\Workspaces\\wokspace ...

  3. Ubuntu14.04下Mongodb数据库可视化工具安装部署步骤(图文详解)(博主推荐)

    不多说,直接上干货! 前期博客 Ubuntu14.04下Mongodb(离线安装方式|非apt-get)安装部署步骤(图文详解)(博主推荐) Ubuntu14.04下Mongodb官网安装部署步骤(图 ...

  4. java代码实现python2中aes加密经历

    背景: 因项目需要,需要将一个python2编写的aes加密方式改为java实现. 1.源python2实现 from Crypto.Cipher import AES from binascii i ...

  5. 实现SSRS订阅

    以前曾经搞过SSRS的订阅,使用的是公司的邮件服务器,最近QQ群中有妹子问到同样的问题,虽然没能帮人家搞定,下面写出自己参考的资料,以供各位参考: 一.订阅前准备工作(转载自http://blog.s ...

  6. 微信小程序 input使用letter-spacing失效问题

    根据ui设计稿, 本来思路是一个input搞定,下面的线使用背景图 background:url('/images/line.png')no-repeat bottom center; 然后使用let ...

  7. 实现点击EditText登录时,界面上移避免键盘遮挡界面

    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&quo ...

  8. SQL的几个路径

    这个是主数据库文件存放的地方 C:\Program Files\Microsoft SQL Server\MSSQL12.MSSQLSERVER2014\MSSQL\DATA

  9. 如何将App从一个账号迁移到另一个账号?

    App迁移(App transfer):将App从一个开发者账号迁移至另一个开发者账号.此文演示了整个迁移过程,为了方便解释,在此过程中,将App转出的开发者账号我们下文将会称之为A账号,接收杭州Ap ...

  10. luoguP4512 【模板】多项式除法 NTT+多项式求逆+多项式除法

    Code: #include<bits/stdc++.h> #define maxn 300000 #define ll long long #define MOD 998244353 # ...