ElementUI Tree 树形控件的使用并给节点添加图标


Posted in Javascript onFebruary 27, 2020

前言:

  因为项目需要用Vue做一个管理系统,其中有一个公司部门的管理页面有用到ElementUI 的树形控件,但是结构中没有使用chexkBox选项框,针对这个功能碰到的一些问题做一下总结

一,数据渲染

1)在<el-tree>标签中绑定data属性

ElementUI Tree 树形控件的使用并给节点添加图标

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

ElementUI Tree 树形控件的使用并给节点添加图标

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

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

Children作为子分支数组,

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

ElementUI Tree 树形控件的使用并给节点添加图标

4)在页面中展示结构的方法是在<el-tree>标签中绑定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 树形控件给节点添加图标

<template>
  <div class="tree">   
  
  <el-tree :data="data5" node-key="id" default-expand-all >
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <span>
        <i :class="node.icon"></i>{{ node.label }}
      </span>       
    </span>
  </el-tree>

  </div>
</template>

<script>
  export default {
    data () {
      return {
         data5: [{
          id: 1,
          label: '一级 1',
          icon:'el-icon-success',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1',
              icon: 'el-icon-info'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1',
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }]
      }
    }
  
  }
</script>

<style scoped>

</style>

ElementUI Tree 树形控件的使用并给节点添加图标

到此这篇关于ElementUI Tree 树形控件的使用并给节点添加图标的文章就介绍到这了,更多相关Element Tree 树形控件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
jQuery ready函数滥用分析
Feb 16 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
jQuery中读取json文件示例代码
May 10 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
easyUI下拉列表点击事件使用方法
May 18 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 #Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 #Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 #Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 #Javascript
BootStrap前端框架使用方法详解
Feb 26 #Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 #Javascript
javascript 数组精简技巧小结
Feb 26 #Javascript
You might like
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
php curl模拟post请求小实例
2013/11/13 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
javascript编写简易计算器
2017/05/06 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
[05:05]DOTA2亚洲邀请赛 战队出场仪式
2015/02/07 DOTA
Python的time模块中的常用方法整理
2015/06/18 Python
利用Python实现Windows定时关机功能
2017/03/21 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
在校大学生个人的自我评价
2014/02/13 职场文书
企业晚会策划方案
2014/05/29 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
中学生秋季运动会广播稿
2014/09/21 职场文书
十八大标语口号
2014/10/09 职场文书
小马王观后感
2015/06/11 职场文书