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 相关文章推荐
Javascript 验证上传图片大小[客户端]
Aug 01 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
聊一聊Vue.js过渡效果
Sep 07 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
如何在vue中使用ts的示例代码
Feb 28 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
vue监听用户输入和点击功能
Sep 27 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 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
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
JavaScript Konami Code 实现代码
2009/07/29 Javascript
JavaScript中获取元素索引的函数
2010/09/10 Javascript
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
浅谈Express异步进化史
2017/09/09 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
Python导入oracle数据的方法
2015/07/10 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
会计工作决心书
2014/03/11 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
员工工作能力评语
2014/12/31 职场文书
2015年中个人总结范文
2015/03/10 职场文书
党员心得体会范文2016
2016/01/23 职场文书
如何写好开幕词?
2019/06/24 职场文书
Python中Permission denied的解决方案
2021/04/02 Python
我的收音机情缘
2022/04/05 无线电