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树形控件怎么用
URL网址:http://myzitong.com/article/jsccio.html