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

 更新时间:2021年11月23日 15:13:56   作者:一只小木头.  
这篇文章主要为大家介绍了vue element树形控件实现树形表格,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

在vue中通过element树形控件来实现树形表格的效果

通过缩进来实现近似树形表格的效果

实现效果图

效果图

安装依赖

$ npm install element-plus --save

Element官网

自定义树形控件

效果图

分析图中控件分布,每个参数都有固定的width,通过width让数值达到对齐的效果

代码主要通过renderContent函数来自定义树形控件

<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'],
                        },
                        {
                          label: '[上行]beam名称',
                          children: [
                              {
                                  label:['name','RS49'],
                              },
                             {
                                  label:['freq_min','10950'],
                              },
                             {
                                  label:['freq_max','14500'],
                              },
                              {
                                  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',[
          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>

其他实现

element树形控件添加虚线

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

总结

树形表格主要通过element的树形控件的自定义函数renderContent结合css来实现

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

相关文章

  • vue项目如何使用three.js实现vr360度全景图片预览

    vue项目如何使用three.js实现vr360度全景图片预览

    这篇文章主要介绍了vue项目如何使用three.js实现vr360度全景图片预览,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue.js使用axios动态获取response里的data数据操作

    Vue.js使用axios动态获取response里的data数据操作

    这篇文章主要介绍了Vue.js使用axios动态获取response里的data数据操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 详解如何在vue-cli中使用vuex

    详解如何在vue-cli中使用vuex

    这篇文章主要介绍了详解如何在vue-cli中使用vuex,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • element-ui 插槽自定义样式居中效果实现思路

    element-ui 插槽自定义样式居中效果实现思路

    这篇文章主要介绍了element-ui 插槽自定义样式居中效果,简单来讲实现思路是通过template标签可理解为一个内嵌组件,宽高重新定义,可在自定义内容外层套一层盒子,让盒子占满所有空间,再使用flex让内部元素居中,需要的朋友可以参考下
    2024-07-07
  • vue2.0自定义指令示例代码详解

    vue2.0自定义指令示例代码详解

    指令通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记。这篇文章主要介绍了vue2.0自定义指令的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • 从组件封装看Vue的作用域插槽的实现

    从组件封装看Vue的作用域插槽的实现

    这篇文章主要介绍了从组件封装看Vue的作用域插槽的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • vue3中的组件间的传值(props)

    vue3中的组件间的传值(props)

    这篇文章主要介绍了vue3中的组件间的传值(props)问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • ant design vue导航菜单与路由配置操作

    ant design vue导航菜单与路由配置操作

    这篇文章主要介绍了ant design vue导航菜单与路由配置操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 浅析vue3响应式数据与watch属性

    浅析vue3响应式数据与watch属性

    这篇文章主要介绍了vue3响应式数据与watch属性的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05
  • Vue3 pinia管理数据的3种方式代码

    Vue3 pinia管理数据的3种方式代码

    在Vue3中Pinia是一个状态管理库,它提供了一种简单而强大的方式来管理应用程序的状态,这篇文章主要给大家介绍了关于Vue3 pinia管理数据的3种方式,需要的朋友可以参考下
    2024-04-04

最新评论