Vue Element-ui实现树形控件节点添加图标详解

目录
  • 1.效果图
  • 2.树形表格绑定数据加标签
  • 3.所有代码
  • 其他实现
  • 总结

1.效果图

2.树形表格绑定数据加标签

想要在树形控件的树节点加上图片或者element-ui的图标,可以在树形表格绑定数据中加上标签icon

   children: [
       {
           icon:'el-icon-top-right',
           label: ['beam名称',''],
           children: [
               {
                   label:['name','RS49'],
               },
               {
                   icon:'src/assets/images/Organization.png',
                   label:['group('+'3'+')','']
                   children:[
                   {
                   label:['10600361','10950','11200','0']
                    }
   					]
				}
           ]
		}
    ],

在树形控件自定义函数中

直接让class等于element-ui的icon标签

img标签需要加上自己图片的地址

    renderContent(h,{node,data,store}){
        // div代表树形控件的一行,div中包含三个span标签
        // 判断节点的label数组数量,通过三目运算来选择class
        // 设置class来控制树形控件进行对齐
      return h('div',[
          // 在树形控件自定义函数中增加icon和图片的标签
          // img标签需要加上自己图片的地址
           h('span',{class:'top-right'}),
          h('img',{src:data.icon}),
          h('span', {class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label[0]),
          h('span', {class:'groupStyle'},node.label[1]),
          h('span',{class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label.length === 2 ? 				'':node.label[2])
          ]);
    },

3.所有代码

<template>
    <div class="mytree">
          <el-tree
              :data="tree_data"
              :props="defaultProps"
              @node-click="handleNodeClick"
              indent="0"
              :render-content="renderContent"
          ></el-tree>
        </div>
</template>

<script lang="ts">
import { defineComponent, ref  } from 'vue'
export default defineComponent({
    components: {},
    data() {
        return {
              tree_data: [
        		{
          // type:1,
         		 label: 'notice-id1',
                  children: [
                        {

                          label: ['卫星名称代号','ZOHREH-2'],
                        },
                        {

                          label: ['组织机构','IRN'],
                        },
                        {
                          label: ['频率范围','10950-1450'],
                        },
                        {
                          icon:'el-icon-top-right',
                          label: ['beam名称',''],
                          children: [
                              {
                                  label:['name','RS49'],
                              },
                             {
                                  label:['freq_min','10950'],
                              },
                             {
                                  label:['freq_max','14500'],
                              },
                              {
                                  icon:'src/assets/images/Organization.png',
                                  label:['group('+'3'+')','']
                                  children:[
                                     {
                                        label:['10600361','10950','11200','0']
                                     },
                                    {
                                        label:['10600361','10950','11200','0']
                                     },
                                    {
                                        label:['10600361','10950','11200','0']
                                     }
                                  ]
                              }
                      ]
                    },
                  ],
                },
              ],
            defaultProps: {
            children: 'children',
            label: 'label',
          },
        }
    },
    method:{
    // 自定义树形控件函数 node代表每个节点
    renderContent(h,{node,data,store}){
        // div代表树形控件的一行,div中包含三个span标签
        // 判断节点的label数组数量,通过三目运算来选择class
        // 设置class来控制树形控件进行对齐
      return h('div',[
          // 在树形控件自定义函数中增加icon和图片的标签
           h('span',{class:[data.icon,data.icon==='el-icon-top-right'? 'top-right':'bottom-left']}),
          h('img',{src:data.icon === 'src/assets/images/Organization.png' ? data.icon:''}),
          h('span', {class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label[0]),
          h('span', {class:'groupStyle'},node.label[1]),
          h('span',{class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label.length === 2 ? 				'':node.label[2])
          ]);
    },
    }

})
</script>

<style lang="scss" scoped>

.nodeStyle{
  width:110px;
  display:inline-block;
  text-align:left;
}
.groupStyle{
  width:150px;
  display:inline-block;
  text-align:left;
}

</style>

其他实现

vue通过element树形控件实现树形表格

element树形控件添加虚线

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

时间: 2021-11-22

vue通过element树形控件实现树形表格

目录 实现效果图 安装依赖 自定义树形控件 其他实现 总结 在vue中通过element树形控件来实现树形表格的效果 通过缩进来实现近似树形表格的效果 实现效果图 安装依赖 $ npm install element-plus --save Element官网 自定义树形控件 分析图中控件分布,每个参数都有固定的width,通过width让数值达到对齐的效果 代码主要通过renderContent函数来自定义树形控件 <template> <div class="mytree&

Vue element树形控件添加虚线详解

目录 1.实现效果 2.实现代码 3.其他实现 总结 1.实现效果 2.实现代码 树形控件虚线的添加主要通过控制css来实现,并且在树形控件的缩进数只能为0,令class="mytree" <div class="mytree"> <!--indent只能为0--> <el-tree :data="tree_data" :props="defaultProps" @node-click="

Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)

这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级关系,就一定会用到树形组件了. 使用Vue + Element UI,构建出最基本的树如下图所示: 现在我们就要在这个基础上进行改造,使页面更加符合我们的交互场景. 下拉菜单 将下拉菜单嵌到树节点中,使操作更加简便.紧凑. 效果演示 效果如图: 图示1:悬浮在树节点状态 图示2:点击三个点图标状态

vue+element UI实现树形表格

本文实例为大家分享了vue+element UI实现树形表格的具体代码,供大家参考,具体内容如下 一.在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-10-12 12:06:49 */ 'use strict' import Vue from 'vue' export default function treeToArray(data, expandA

vue Element-ui表格实现树形结构表格

本文实例为大家分享了Element-ui表格实现树形结构表格的具体代码,供大家参考,具体内容如下 前端效果展示: 在el-table中,支持树类型的数据的显示.当 row 中包含 children 字段时,被视为树形数据.渲染树形数据时,必须要指定 row-key.支持子节点数据异步加载. 通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点.children 与 hasChildren 都可以通过 tree-props 配置. row-key="id"和:tr

Vue组件库ElementUI实现表格加载树形数据教程

ElementUI实现表格树形列表加载教程,供大家参考,具体内容如下 Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型 关键代码,在el-table添加属性, :tree-props="{children: 'children'}" ,注意row必须命名为children,官网也进行了说明: 支持树类型的数据的显示.当 row 中包含 children 字

将Vue组件库更换为按需加载的方法步骤

本文介绍了将Vue组件库更换为按需加载的方法步骤,分享给大家,具体如下: 按需加载DEMO仓库地址 背景 我司前端团队拥有一套支撑公司业务系统的UI组件库,经过多次迭代后,组件库体积非常庞大. 组件库依赖在npm上管理,组件库以项目根目录的 index.js 作为出口导出,文件中导入了项目中所有的组件,并提供组件安装方法. index.js import Button from "./button"; import Table from "./table"; imp

vue项目中将element-ui table表格写成组件的实现代码

表格中我们经常需要动态加载数据, 如果有多个页面都需要用到表格, 那我希望可以有个组件, 只传数据过去显示, 不用每个页面都去写这么一段内容: <el-table :data="tableData" border size="mini" fit highlight-current-row height="500"> <el-table-column type="index" align="cente

Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数

背景 笔者之前一直使用 bootstrap table ,因为当前项目中主要使用 Layui 框架,于是也就随了 Layui table ,只是在使用的时候出现了一些问题,当然也是怪自己不熟悉的锅吧! 出现的问题: 1.使用 Layui 官方提供的 [转换静态表格] 方式初始化加载时报 id 找不到的错误(自己的锅) 2.传递参数问题(姑且算是 Layui 官方的锅) 笔者使用的 table 加载刷新方案 有一个页面,左侧是一个 tree,右侧是一个 table,默认 table 加载全数据,当

关于Vue组件库开发详析

前言 2017年是Vue.js大爆发的一年,React迎来了一个强有力的竞争对手,王者地位受到挑战(撰写此文时github上Vue与React的star数量已逼近).我们团队这一年有十多个大型项目采用了Vue技术栈,在开发效率.页面性能.可维护性等方面都有不错的收效. 我们希望把这些项目中可复用的功能组件提取出来,给后续项目使用,以减少重复开发,提高效率,同时也为了致敬前端界"出一个框架,造一遍轮子"的行规, 一个基于Vue 2的移动端UI组件库被提上日程. 组件库的开发过程总的来说还

vue组件库的在线主题编辑器的实现思路

一般而言一个组件库都会设计一套相对来说符合大众审美或产品需求的主题,但是主题定制需求永远都存在,所以组件库一般都会允许使用者自定义主题,我司的vue组件库hui的定制主题简单来说是通过修改预定义的scss变量的值来做到的,新体系下还做到了动态换肤,因为皮肤本质上是一种静态资源(CSS文件和字体文件),所以只需要约定一种方式来每次动态请求加载不同的文件就可以了,为了方便这一需求,还配套开发了一个Vessel脚手架的插件,只需要以配置文件的方式列出你需要修改的变量和值,一个命令就可以帮你生成对应的皮

vue实现ajax滚动下拉加载,同时具有loading效果(推荐)

代码如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue测试ajax的使用</title> <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-

vue+layui实现select动态加载后台数据的例子

刚开始由于layui form渲染与vue渲染有时间差 有时会导致 select里面是空白的 后来就想办法 等vue数据渲染完 再渲染layui form 试过模块化导入layui form组件 然后等vue数据渲染完后手动进行渲染 这种方式有一个小问题 有时候会提示render方法未定义 可能是由于执行顺序原因 vue先执行了 最后把vue代码放到layui.use里面 问题解决 可能不是最好的实现方式 如有更好的实现方式欢迎指出 共同进步 页面代码 <div id="demo"

vue 使用async写数字动态加载效果案例

父组件 <interval-number :number-content="blockHeight" v-if="blockHeight>0"></interval-number> import IntervalNumber from './IntervalNumber.vue' components:{ IntervalNumber, } 子组件 <template> <span class="Interv

解决vue单页面应用进入页面加载所有 js 的问题

一般在index.js中都是这么引入的组件 import from '@/pages/my' import Cart from '@/pages/cart' import Order from '@/pages/order' import TMap from '@/pages/map' import New from '@/pages/new' 换成这样就好啦 const My = r => require.ensure([], () => r(require('@/pages/my')),

vue实现的上拉加载更多数据/分页功能示例

本文实例讲述了vue实现的上拉加载更多数据/分页功能.分享给大家供大家参考,具体如下: 加载状态 <div v-if='has_log == 0'> <load-more tip="上拉加载" :show-loading="false" background-color="#fbf9fe"></load-more> </div> <div v-if='has_log == 1'> <