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 相关文章推荐
使用onbeforeunload属性后的副作用
Mar 08 Javascript
将函数的实际参数转换成数组的方法
Jan 25 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
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 时间日期操作实战
2011/08/26 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
php集成动态口令认证
2016/07/21 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
2020/08/25 Javascript
[00:11]战神迅矛
2019/03/06 DOTA
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
进一步了解Python中的XML 工具
2015/04/13 Python
详解python之配置日志的几种方式
2017/05/22 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
python3中eval函数用法使用简介
2019/08/02 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
奥地利网上书店:Weltbild
2017/07/14 全球购物
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
致标枪运动员广播稿
2014/02/06 职场文书
婚礼主持结束词
2014/03/13 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
《詹天佑》教学反思
2016/02/20 职场文书
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python