网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

ElementUITree树形控件怎么用

小编给大家分享一下ElementUI Tree树形控件怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联建站服务项目包括台江网站建设、台江网站制作、台江网页制作以及台江网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,台江网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到台江省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

一,数据渲染

1)在标签中绑定data属性

ElementUI Tree树形控件怎么用

2)在vue实例的data中声明list变量

ElementUI Tree树形控件怎么用

3)从后台获取到的数据是以数组里面嵌套多个对象的结构并赋值给list,

当前的数据是OrgName为当前结构名称,

Children作为子分支数组,

子分支中的结构与当前结构一致

ElementUI Tree树形控件怎么用

4)在页面中展示结构的方法是在标签中绑定porps属性,

并在vue实例的data中用label属性定义显示的名称,

用childern属性绑定展示的子分支数据

ElementUI Tree树形控件怎么用

5)最后展示的结构如下

ElementUI Tree树形控件怎么用

二,点击当前分支获取当前分支与上级分支的值

ElementUI Tree树形控件怎么用

1)此处使用的是@node-click事件并绑定一个函数,

函数在vue实例的methods中定义,并可以接收两个参数node与data

2)node是一个对象,

就是点击当前分支获得的数据,

如果只需要当前层级的数据的话就可以使用node,

后台有一并返给我上级的ID,

但是页面中点击分支后还需要显示上级的名称,

所以此处使用node就不太够

ElementUI Tree树形控件怎么用

3)data同样也是一个对象,

他的data属性包含的就是当前分支的值,

其中的parent属性就包含了他上级的值,

甚至里面的parent属性还包含更上一级的值一直到最外层,

可以根据自己当前项目的需要来选择使用data还是node来取到自己需要的值

ElementUI Tree树形控件怎么用

三,el-tree 树形控件给节点添加图标







ElementUI Tree树形控件怎么用

以上是“ElementUI Tree树形控件怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


本文题目:ElementUITree树形控件怎么用
分享网址:http://bjjierui.cn/article/jsccio.html

其他资讯