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 相关文章推荐
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
javaScript封装的各种写法
Aug 14 Javascript
搭建vue开发环境
Jul 19 Javascript
浅谈js闭包理解
Apr 01 Javascript
vue实现图片上传功能
May 28 Javascript
小程序实现列表倒计时功能
Jan 29 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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
php根据身份证号码计算年龄的实例代码
2014/01/18 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
javascript模拟命名空间
2015/04/17 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
Python的面向对象编程方式学习笔记
2016/07/12 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
python format 格式化输出方法
2018/07/16 Python
python中append实例用法总结
2019/07/30 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
《在家里》教后反思
2014/03/01 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
食品质检员岗位职责
2015/04/08 职场文书