组件: 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. ThinkPHP5 (路径优化,路由)

    路径:www.tp5.comm/index.php/index/index/index 站点路径/入口文件/模块/控制器/方法 一.绑定模块 public下的php文件,如index.php,内部写 ...

  2. Linux中设置vim自动在运算符号两边加上空格

    vim中设置自动在=+-之类的运算符号左右两边加上空格.原版的vim不带这个功能,写出的代码例如z=x+y,不美观,很多编译器(如VS)能够自动在符号两边加上空格,如z = x + y,看起来比较美观 ...

  3. C/C++中的函数指针

    C/C++中的函数指针 一.引子 今天无聊刷了leetcode上的一道题,如下: Median is the middle value in an ordered integer list. If t ...

  4. Core Animation 负责将bitmap绑定提交到 GPU-[CALayer _display]

    Core Animation 负责将bitmap绑定提交到 GPU: Core Animation一头连着CPU,一头连着GPU. ZSTest`-[ZSDTCoreTextCell drawRect ...

  5. Module build failed: Module failed because of a eslint warning

    eslint 设置 warning 级别,在 开发编译失败的原因,报错如下: F:\vue-mobile-skeleton>npm run dev > byhealth@1.0.0 dev ...

  6. Shell(四)函数

    函数 linux shell 可以用户定义函数,然后在shell脚本中可以随便调用. 一.格式 shell中函数的定义格式如下: [ function ] funname [()] { action; ...

  7. 半虚拟化驱动virtio-Windows

    下载网站 Downloads - KVM http://www.linux-kvm.org/page/Downloads yum 安装: [root@kvm-server ~]# wget https ...

  8. 流媒体应用程序Mobdro或存在安全隐患

    Mobdro是一款流媒体应用程序,可以安装在任何Android设备上,包括手机,平板电脑,亚马逊的Fire TV Stick和Google的Chromecast.它现在已经流行了一段时间,特别是在围绕 ...

  9. linux软链接与硬链接详解

    软连接 命令: ln -s 原文件 目标文件 特征: 1.相当于windows的快捷方式 2.只是一个符号连接,所以软连接文件大小都很小 3.当运行软连接的时候,会根据连接指向找到真正的文件,然后执行 ...

  10. 监控SQLserver计数器