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 相关文章推荐
jQuery选择头像并实时显示的代码
Jun 27 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
详解js闭包
Sep 02 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 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抓即时股票信息
2006/10/09 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
python简单验证码识别的实现方法
2019/05/10 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
文员个人求职自荐信
2013/09/21 职场文书
幼师自我鉴定范文
2013/10/01 职场文书
中药专业大学生医药工作求职信
2013/10/25 职场文书
高中体育教学反思
2014/01/24 职场文书
2014年环卫工作总结
2014/11/22 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python