一、效果图

二、封装两个组件，分别为DynamicTable.vue和TableColumn.vue，TableColumn.vue主要是使用递归来对表头进行循环生成

DynamicTable.vue

import TableColumn from './TableColumn'

export default {

props: {

// 表格的数据

tableData: {

type: Array,

required: true

},

// 多级表头的数据

tableHeader: {

type: Array,

required: true

},

// 表格的高度

height: {

type: String,

default: '300'

}

},

components: {

TableColumn

}

}

TableColumn.vue

export default {

name: 'tableColumn',

props: {

coloumnHeader: {

type: Object,

required: true

}

}

}

三、使用

HTML代码

JS代码

import DynamicTable from './components/DynamicTable'

export default {

components: {

DynamicTable

},

data () {

return {

searchForm: {

month: getMonth(),

serviceCategory: '1'

},

dynamicTableShow: true, // 使得DynamicTable组件重新渲染变量

// 表数据

tableData: [

{

districtName: '1',

timeDimension: '2',

residentPopNum: '3',

residentPopDst: '4',

liveLandArea: '5',

liveLandDst: '6',

employmentLandArea: '7',

employmentLandDst: '8'

}

],

// 表头数据

tableConfig: [

{

id: 100,

label: '一级表头',

prop: '',

children: [

{

id: 110,

label: '二级表头1',

prop: 'districtName'

},

{

id: 120,

label: '二级表头2',

prop: 'timeDimension'

}

]

},

{

id: 200,

label: '一级表头1',

prop: '',

children: [

{

id: 210,

label: '二级表头2',

prop: '',

children: [

{

id: 211,

label: '三级表头3',

prop: 'residentPopNum'

},

{

id: 212,

label: '三级表头',

prop: 'residentPopDst'

}

]

}

]

},

{

id: 300,

label: '一级表头1',

prop: '',

children: [

{

id: 310,

label: '二级表头2',

prop: '',

children: [

{

id: 311,

label: '三级表头3',

prop: 'liveLandArea'

},

{

id: 312,

label: '三级表头3',

prop: 'liveLandDst'

}

]

},

{

id: 320,

label: '二级表头1',

prop: '',

children: [

{

id: 321,

label: '三级表头3',

prop: 'employmentLandArea'

},

{

id: 322,

label: '三级表头3',

prop: 'employmentLandDst'

}

]

}

]

}

]

}

},

methods: {

// 服务类型改变的时候，需要重新请求表头信息和表格数据

handleServiceCategoryChange (val) {

// 设置dynamicTableShow为false，使得DynamicTable组件重新渲染

this.dynamicTableShow = false

if (val === '1') {

this.tableData = [

{

districtName: '1',

timeDimension: '2',

residentPopNum: '3',

residentPopDst: '4',

liveLandArea: '5',

liveLandDst: '6',

employmentLandArea: '7',

employmentLandDst: '8'

}

]

this.tableConfig = [

{

id: 100,

label: '一级表头',

prop: '',

children: [

{

id: 110,

label: '二级表头1',

prop: 'districtName'

},

{

id: 120,

label: '二级表头2',

prop: 'timeDimension'

}

]

},

{

id: 200,

label: '一级表头1',

prop: '',

children: [

{

id: 210,

label: '二级表头2',

prop: '',

children: [

{

id: 211,

label: '三级表头3',

prop: 'residentPopNum'

},

{

id: 212,

label: '三级表头',

prop: 'residentPopDst'

}

]

}

]

},

{

id: 300,

label: '一级表头1',

prop: '',

children: [

{

id: 310,

label: '二级表头2',

prop: '',

children: [

{

id: 311,

label: '三级表头3',

prop: 'liveLandArea'

},

{

id: 312,

label: '三级表头3',

prop: 'liveLandDst'

}

]

},

{

id: 320,

label: '二级表头1',

prop: '',

children: [

{

id: 321,

label: '三级表头3',

prop: 'employmentLandArea'

},

{

id: 322,

label: '三级表头3',

prop: 'employmentLandDst'

}

]

}

]

}

]

} else {

this.tableData = [

{

districtName: '111',

timeDimension: '222'

}

]

this.tableConfig = [

{

id: 100,

label: '一级表头',

prop: '',

children: [

{

id: 110,

label: '二级表头1',

prop: 'districtName'

},

{

id: 120,

label: '二级表头2',

prop: 'timeDimension'

}

]

}

]

}

// 此处是DOM还没有更新，此处的代码是必须的

this.$nextTick(() => {

// DOM 现在更新了

this.dynamicTableShow = true

})

}

}

}

.policy-wrapper{

margin-top: 10px;

}

.result-wrapper{

margin-top: 22px;

}

vue+element-ui动态生成多级表头，并且将有相同字段下不同子元素合并为同一个

element表头要多层生成,下一级表头数据源必须是当前表头的子一级,这样一层一层嵌套可以生成多层表头: 要把数据处理成这种类型的数据 var arr = []; for (var key in ob ...

MVC5+EF6 入门完整教程13 -- 动态生成多级菜单

稍微有一定复杂性的系统,多级菜单都是一个必备组件. 本篇专题讲述如何生成动态多级菜单的通用做法. 我们不用任何第三方的组件,完全自己构建灵活通用的多级菜单. 需要达成的效果:容易复用,可以根据mode ...

JAVA操作Excel 可配置，动态 生成复杂表头 复杂的中国式报表表头

转载:开源社区http://www.oschina.net/code/snippet_1424099_49530?p=2代码] [Java]代码 该代码实现了Excel复杂表头的生成 基于sql se ...

vue2.0+Element UI 实现动态表单(点击按钮增删一排输入框)

对于动态增减表单项,Element UI 官方文档表单那一节已经介绍得很清楚了,我之前没有看见,绕了很多弯路,这里针对点击按钮增删一排输入框的问题做一个总结. 效果图如下 存在一排必填的姓名与手机号, ...

WPF + RDLC + 动态生成列 + 表头合并

如下,评论超过20条,马上发代码*(੭*ˊᵕˋ)੭*ଘ,效果如下: 代码逻辑简单. WPF使用RDLC需要使用如下DLL 新建WPF 窗体,黏贴下大概如下

vue+element UI递归方式实现多级导航菜单

介绍 这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能. 使用方法 由于该组 ...

使用aspose.cell动态导出多表头 EXCEL

效果图: 前台调用: using System; using System.Collections.Generic; using System.Linq; using System.Web; usin ...

第三方控件netadvantage UltraWebGrid如何生成多级跨行表头个人总结

1.生成多级表头,横向和纵向跨度. 1>对于有字段的的表头合并:也就是(工期.项目经理信息除外)可以在前台通过spanx和spany属性控制.对于空字段(工资.项目经理必须通过后台动态添加),而 ...

MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航

上篇文章我们完成了 动态生成多级菜单 这个实用组件. 本篇文章我们要开发另一个实用组件:面包屑导航. 面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱 ...

随机推荐

IOS __ 面试题

1.下面四种内部排序算法中哪一种在最差的情况下时间复杂度最高:(B) A.快速排序 B.冒泡排序 C.堆排序 D.归并排序   2.Shell中,将command1的输出作为command2的输入应该 ...

AD中各层的说明

PCB各层说明: 1.丝印层(OverLay,Silkscreen):有顶层丝印和底层丝印.用来画器件轮廓,器件编号和一些图案等. 2.信号层(SignalLayer):对于两层板,主要是TopLay ...

IT行业果真跳槽快吗？

近年来IT行业越来越火爆,许多人也开始炒,月入万元不是梦,随随便便拿高薪之类的文章层出不穷,许多的青少年甚至中年人开始关注这块,许多人选择去学习it行业,也朝着月入万元的目标前进,然而,曾几何时,月入 ...

git subtree用法(转)

git subtree用法 一.使用场景 例如,在项目Game中有一个子目录AI.Game和AI分别是一个独立的git项目,可以分开维护.为了避免直接复制粘贴代码,我们希望Game中的AI子目录与AI ...

【Android】 PopupWindow使用小结

PopupWindow的很多用法网上比较多,我就不做过多解释了,只说下可能会遇到的问题,以及解决办法: 1.PopupWindow中的listview无响应 这个主要是因为show写在了set ...

Javascript通过className选择元素

NSData的一些用法

//NSData遵循NSCopying NSCoding协议,它提供面向对象的数组存储为字节 //适用与读写文件,而读写文件的时候需要一个缓冲区,而NSDate就提供了这么一个缓存区 //定义一个ch ...

SharePoint solution and feature management with PowerShell

/* Author: Jiangong SUN */ Hello, I want to introduce SharePoint solution and feature management usi ...

ASP.NET MVC 5– 采用Wijmo MVC 5模板1创建应用程序分钟

启用 采用ComponentOne Studio for ASP.NET Wijmo制作MVC5应用,首先要做的就是安装pid=4&from=MVC4DOC">Studio f ...

avalon组件

如何做一个avalon组件 在avalon1.5中改用更直观的自定义标签来声明组件,废掉ms-widget,引入更强大的生命周期管理,可以让组件任意套嵌. 组件是由JS,HTML,CSS构成 JS 以 ...

css画表格多级表头,element UI实现动态生成多级表头相关推荐

  1. 基于Element组件下动态生成多级表头以及数据

    介绍 element是一套基于vue的组件,本文主要介绍如何根据后端传输数据来动态生成表格. 代码 html 利用vue里的for循环来动态生成表头,再利用if语句判断是否有二级表头,并将对应key赋 ...

  2. element ui el-table动态生成表头(v-for/v-if)导致的高度塌陷（少一截）的解决办法

    只需要在vue的updated生命周期中加入强制刷新组件代码即可解决: 需要给el-table组件加上ref!!!!!! updated() {this.$refs['showData_table'] ...

  3. element ui 菜单 动态生成 导航

    1. 利用饿了么ui 的 导航菜单组件 (el-menu)来结合 后台返回的 菜单数组进行循环嵌套. 2.看如下代码 <el-menu:default-active="activeIn ...

  4. Element UI动态生成多级表头

    1 基础常用的原型样例 我们常常遇到的情况就是表头固定的,我们需要从后端获取对应表头的信息,如果信息比较多的时候为了方便我们展示,可以固定表头和列,下面是一个我们常见的例子: 固定列和表头可以同时使用 ...

  5. vue动态生成多级树结构

    vue动态生成多级树结构 前言 一.思路 二.封装组件的代码 1.组件里的template 2.组件里的script 3.style 三.使用步骤 1.调用组件 2.传入数据 3.实现的效果 总结 前 ...

  6. elementui table表格动态生成多级表头

    1.实现效果 2.封装table表格组件 test1.vue <template><el-table-column :label="coloumnHeader.label& ...

  7. vue+element-ui动态生成多级表头，并且将有相同字段下不同子元素合并为同一个...

    element表头要多层生成,下一级表头数据源必须是当前表头的子一级,这样一层一层嵌套可以生成多层表头: 要把数据处理成这种类型的数据 var arr = [];for (var key in obj ...

  8. elementui :on-remove怎么用_Vue + Vuex + Element UI实现动态全局主题颜色

    点击右上方红色按钮关注"web秀",让你真正秀起来 前言 经常用Element UI的小伙伴,应该知道,Element UI官方文档,可以自由更换主题.那么,我们怎么把这个功能用到 ...

  9. Element UI 自定义动态换肤（主题）

    需求背景:项目需要支持动态换主题,主题色可以随意选择(即用户想用什么颜色的主题就用什么颜色的主题):而element官网给的 自定义主题 只能是项目里写死,无法实现用户动态切换: 方式一:调接口加载C ...

最新文章

  1. Golang开发环境搭建-Vim篇
  2. linux fedora35让GRUB 2记住上一次启动的操作系统
  3. 基于Xml 的IOC 容器-分配路径处理策略
  4. Pandas处理数据缺失值
  5. WPF应用程序内嵌网页
  6. 【Java】浅谈Java的GUI开发
  7. portable-config-maven-plugin 实现replace-package
  8. Mr.J--简易的判断输入两次密码是否一致(静态)
  9. UITableView 优化
  10. Xcode7 Xcode6 中添加pch文件
  11. linux环境下通过nginx实现tomcat集群
  12. 网络摄像头ip php,C#实现IP摄像头的方法
  13. 计算机课件白板培训,希沃白板使用教学，直接导入PPT课件并修改
  14. 【C++】万年历程序
  15. bat调用ssis package
  16. 如何用Java写一个企业晨报？我来教你！
  17. 【连载之一】那些公众号不会告诉你的职业真相
  18. 算术左移、算术右移、逻辑右移
  19. 给大家推荐一个卖旧衣服的，vx/zfb“麻袋到家旧衣服回收”可以下单啦，快递小哥免费上门取，0.5/kg，闲置衣服再也不用扔到垃圾桶了
  20. mysql添加字段语句

热门文章

  1. 双线性插值实现图像缩放详解
  2. Java 性能分析工具一览（JDK自带）
  3. 在水木社区的一个回帖
  4. 软件测试行业未来职业规划是什么
  5. AI干货分享：数据驱动的智能决策在商业中的应用（附图解）
  6. Oracle PrimaveraUnifier成本管理器(Cost Manager)简要介绍
  7. Matlab中频谱、功率谱、功率谱密度的关系以及如何求信号的功率
  8. iOS 项目开发总览,开发者账号
  9. 「后端小伙伴来学前端了」Vue集成 Element-tiptap 富文本编辑器，实现气泡菜单，划词弹出菜单
  10. 西门子6ES70变频器速度控制的参数设置