本文介绍如何使用Vue.js结合Element UI库，实现动态生成带有多级表头的表格。通过封装`DynamicTable`和`TableColumn`组件，利用递归处理表头数据，展示了如何在组件中实现这一功能。示例代码包括数据结构和组件间的交互，展示了在服务类型变化时重新渲染表格数据的处理方法。
一、效果图
二、封装两个组件，分别为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 以 ...
扫一扫
3522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
