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 相关文章推荐
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
js 内存释放问题
Apr 25 Javascript
jquery事件与函数的使用介绍
Sep 29 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
Vue中插入HTML代码的方法
Sep 21 Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 Javascript
Vue实现购物车基本功能
Nov 08 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
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
PHP概率计算函数汇总
2015/09/13 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
jQuery代码优化 选择符篇
2011/11/01 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
JavaScript基础之this详解
2017/06/04 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
墨西哥网上购物:Linio墨西哥
2016/10/20 全球购物
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
元旦晚会邀请函
2014/02/01 职场文书
促销活动总结模板
2014/07/01 职场文书
失职检讨书大全
2015/01/26 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
学生会任命书范本
2015/09/21 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
电工实训心得体会
2016/01/14 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python