ant design vue:动态合并表头

最新推荐文章于 2025-06-27 11:37:38 发布
最新推荐文章于 2025-06-27 11:37:38 发布
阅读量1.6k 收藏 2
点赞数 1
CC 4.0 BY-SA版权
分类专栏： ant design vue 文章标签： vue.js elementui linq
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lilycheng1986/article/details/122390706
本文介绍了一个使用Vue实现的动态表格，能够根据数据自动生成表头并进行合并显示。该表格支持隔行变色，并展示了如何定义列属性和数据源。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<template>
	<!-- 动态合并表头 -->
	<div>
		<a-table :columns="columns" :data-source="data" bordered :customRow="customRow">
		</a-table>
	</div>

</template>

<script>
	export default {
		name: "dataQuery",
		data() {
			return {
				columns:[],
				data: [{
						date: ' 2021-11-01 ',
						batchNo: ' 1 ',
						x1: 8.1,
						x2: 10.6,
						x3: 9.8,
						x4: 9,
						x5: 9.4,
						x6: 9.3,
						x7: 10.2,
						x8: 11.7,
						avgX: 9.7625,
						r: 3.6
					},
					{
						date: ' 2021-11-01 ',
						batchNo: ' 1 ',
						x1: 8.1,
						x2: 10.6,
						x3: 9.8,
						x4: 9,
						x5: 9.4,
						x6: 9.3,
						x7: 10.2,
						x8: 11.7,
						avgX: 9.7625,
						r: 3.6
					},
					{
						date: ' 2021-11-01 ',
						batchNo: ' 1 ',
						x1: 8.1,
						x2: 10.6,
						x3: 9.8,
						x4: 9,
						x5: 9.4,
						x6: 9.3,
						x7: 10.2,
						x8: 11.7,
						avgX: 9.7625,
						r: 3.6
					},
					{
						date: ' 2021-11-01 ',
						batchNo: ' 1 ',
						x1: 8.1,
						x2: 10.6,
						x3: 9.8,
						x4: 9,
						x5: 9.4,
						x6: 9.3,
						x7: 10.2,
						x8: 11.7,
						avgX: 9.7625,
						r: 3.6
					},
					{
						date: ' 2021-11-01 ',
						batchNo: ' 1 ',
						x1: 8.1,
						x2: 10.6,
						x3: 9.8,
						x4: 9,
						x5: 9.4,
						x6: 9.3,
						x7: 10.2,
						x8: 11.7,
						avgX: 9.7625,
						r: 3.6
					},
					{
						date: ' 2021-11-01 ',
						batchNo: ' 1 ',
						x1: 8.1,
						x2: 10.6,
						x3: 9.8,
						x4: 9,
						x5: 9.4,
						x6: 9.3,
						x7: 10.2,
						x8: 11.7,
						avgX: 9.7625,
						r: 3.6
					},
					{
						date: ' 2021-11-01 ',
						batchNo: ' 1 ',
						x1: 8.1,
						x2: 10.6,
						x3: 9.8,
						x4: 9,
						x5: 9.4,
						x6: 9.3,
						x7: 10.2,
						x8: 11.7,
						avgX: 9.7625,
						r: 3.6
					},
					{
						date: ' 2021-11-01 ',
						batchNo: ' 1 ',
						x1: 8.1,
						x2: 10.6,
						x3: 9.8,
						x4: 9,
						x5: 9.4,
						x6: 9.3,
						x7: 10.2,
						x8: 11.7,
						avgX: 9.7625,
						r: 3.6
					},
					{
						date: ' 2021-11-01 ',
						batchNo: ' 1 ',
						x1: 8.1,
						x2: 10.6,
						x3: 9.8,
						x4: 9,
						x5: 9.4,
						x6: 9.3,
						x7: 10.2,
						x8: 11.7,
						avgX: 9.7625,
						r: 3.6
					},
					{
						date: ' 2021-11-01 ',
						batchNo: ' 1 ',
						x1: 8.1,
						x2: 10.6,
						x3: 9.8,
						x4: 9,
						x5: 9.4,
						x6: 9.3,
						x7: 10.2,
						x8: 11.7,
						avgX: 9.7625,
						r: 3.6
					},
					{
						date: ' 2021-11-01 ',
						batchNo: ' 1 ',
						x1: 8.1,
						x2: 10.6,
						x3: 9.8,
						x4: 9,
						x5: 9.4,
						x6: 9.3,
						x7: 10.2,
						x8: 11.7,
						avgX: 9.7625,
						r: 3.6
					},
					{
						date: ' 2021-11-01 ',
						batchNo: ' 1 ',
						x1: 8.1,
						x2: 10.6,
						x3: 9.8,
						x4: 9,
						x5: 9.4,
						x6: 9.3,
						x7: 10.2,
						x8: 11.7,
						avgX: 9.7625,
						r: 3.6
					},
					{
						date: ' 2021-11-01 ',
						batchNo: ' 1 ',
						x1: 8.1,
						x2: 10.6,
						x3: 9.8,
						x4: 9,
						x5: 9.4,
						x6: 9.3,
						x7: 10.2,
						x8: 11.7,
						avgX: 9.7625,
						r: 3.6
					},
					{
						date: ' 2021-11-01 ',
						batchNo: ' 1 ',
						x1: 8.1,
						x2: 10.6,
						x3: 9.8,
						x4: 9,
						x5: 9.4,
						x6: 9.3,
						x7: 10.2,
						x8: 11.7,
						avgX: 9.7625,
						r: 3.6
					},
					{
						date: ' 2021-11-01 ',
						batchNo: ' 1 ',
						x1: 8.1,
						x2: 10.6,
						x3: 9.8,
						x4: 9,
						x5: 9.4,
						x6: 9.3,
						x7: 10.2,
						x8: 11.7,
						avgX: 9.7625,
						r: 3.6
					},
					{
						date: ' 2021-11-01 ',
						batchNo: ' 1 ',
						x1: 8.1,
						x2: 10.6,
						x3: 9.8,
						x4: 9,
						x5: 9.4,
						x6: 9.3,
						x7: 10.2,
						x8: 11.7,
						avgX: 9.7625,
						r: 3.6
					},
					{
						date: ' 2021-11-01 ',
						batchNo: ' 1 ',
						x1: 8.1,
						x2: 10.6,
						x3: 9.8,
						x4: 9,
						x5: 9.4,
						x6: 9.3,
						x7: 10.2,
						x8: 11.7,
						avgX: 9.7625,
						r: 3.6
					},
					{
						date: ' 2021-11-01 ',
						batchNo: ' 1 ',
						x1: 8.1,
						x2: 10.6,
						x3: 9.8,
						x4: 9,
						x5: 9.4,
						x6: 9.3,
						x7: 10.2,
						x8: 11.7,
						avgX: 9.7625,
						r: 3.6
					},
					{
						date: ' 2021-11-01 ',
						batchNo: ' 1 ',
						x1: 8.1,
						x2: 10.6,
						x3: 9.8,
						x4: 9,
						x5: 9.4,
						x6: 9.3,
						x7: 10.2,
						x8: 11.7,
						avgX: 9.7625,
						r: 3.6
					},
					{
						date: ' 2021-11-01 ',
						batchNo: ' 1 ',
						x1: 8.1,
						x2: 10.6,
						x3: 9.8,
						x4: 9,
						x5: 9.4,
						x6: 9.3,
						x7: 10.2,
						x8: 11.7,
						avgX: 9.7625,
						r: 3.6
					},
					{
						date: ' 2021-11-01 ',
						batchNo: ' 1 ',
						x1: 8.1,
						x2: 10.6,
						x3: 9.8,
						x4: 9,
						x5: 9.4,
						x6: 9.3,
						x7: 10.2,
						x8: 11.7,
						avgX: 9.7625,
						r: 3.6
					},
					{
						date: ' 2021-11-01 ',
						batchNo: ' 1 ',
						x1: 8.1,
						x2: 10.6,
						x3: 9.8,
						x4: 9,
						x5: 9.4,
						x6: 9.3,
						x7: 10.2,
						x8: 11.7,
						avgX: 9.7625,
						r: 3.6
					}
				]
			}
		},
		created() {},
		mounted() {
			this.columns = this.createColumns();
		},
		methods: {
			//设置表格隔行变色
			customRow(record, index) {
				return {
					style: {
						// 字体颜色
						color: record.remarkDesc ? record.remarkDesc.fontColor : '#262626',
						// 行背景色
						'background-color': index % 2 == 0 ? '#FAFAFA' : '#FFFFFF'
					}
				}
			},
			createColumns() {
				// 动态生成表头，合并表头
				// 第一列和第二列
				let column1 = {
					title: '日期',
					dataIndex: 'date',
					key: 'date'
				};
				let column2 = {
					title: '批次号',
					dataIndex: 'batchNo',
			 	key: 'batchNo'
				};
				// 第三列是合并列，把n列合并成一列
				let column3 = [];
				let n = 8;
				for (let i = 1; i <= n; i++) {
					// 第一个的colSpan=n，后面的colSpan=0
					let col = {};
					if(i==1){
						col = {
							title: '测量值',
							dataIndex: 'x' + i,
							key: 'x' + i,
							colSpan: n,
						}
					}else{
						col = {
							title: '测量值',
							dataIndex: 'x' + i,
							key: 'x' + i,
							colSpan: 0,
						}
					}
					
					column3.push(col);
				}
				let column4 = {
					title: '平均值X',
					dataIndex: 'avgX',
					key: 'avgX',
				};
				let column5 = {
					title: '极差R',
					dataIndex: 'r',
					key: 'r',
				};
				// 把第一列和第二列加到第三列的前面，第四列和第五列加到第三列的后面
				column3.unshift(column2);
				column3.unshift(column1);
				column3.push(column4);
				column3.push(column5);
				return column3;
			}
		}
	}
</script>

<style scoped>

</style>

data和n是动态从接口获取的数据，这里只是一个举例而已，所以直接写死在代码里了。

【Ant-Design-Vue】4、动态表头的实现
weixin_52938153的博客
06-10 1096
Anti-Design-Vue 是一个基于 Vue.js 的 UI 组件库，旨在提供一套设计反模式的组件，以帮助开发者创建独特且具有反传统风格的用户界面。与典型的 UI 设计模式不同，Anti-Design-Vue 强调打破常规，通过不对称布局、大胆的色彩搭配和意想不到的交互效果，来吸引用户的注意力和兴趣。其组件库包含各种按钮、表单、导航栏和卡片等，均支持高度定制化。开发者可以轻松集成这些组件，并通过丰富的 API 和灵活的主题配置，实现个性化的设计风格。Anti-Design-Vue 适用于那些希望在视觉
使用 Ant Design Vue 实现动态表头与数据填充
Programming Talk
06-04 1055
通过可以自定义单元格内容的渲染方式。例如，我们可以为某些字段添加链接或按钮。title: '操作',});在<template><a-button @click="handleEdit(record)">编辑</a-button></a-table><script>props: {data: {},data() {return {},watch: {data: {},deep: true},methods: {});});
Ant Design of Vue —— Table表格组件 —— 设置动态表头
当历史只剩罪恶，唯有推倒重来，我们开创文明，我们传承文明，周而复始，生生不息。
03-26 8147
需求：表格的表头，需要动态改变 效果图 方法 动态改变columns ，通过push改变 关键代码 find(arr, str) { this.findTF = false; arr.forEach(item => { if (item.title == str) { return this.findTF = true; } }) }, find2(arr, str) { this.findTF2 = false; arr.forEach(item =
vue a-table自定义表头颜色+合并表格
最新发布
weixin_45869649的博客
06-27 273
vue a-table自定义表头颜色+合并表格+自定义表头文字+动态表头
Ant Design of Vue —— Table表格组件之设置动态表头
热门推荐
每文的博客
07-01 1万+
先看效果： 代码如下： scopedSlots是作用域插槽，filterDropdown可以自定义筛选菜单，title表头名字 通过下拉框选择，选到哪一项，就给相应的变量赋值 https://www.cnblogs.com/duoer/p/12096895.html ...
ant design vue:表头合并
1111111111
11-26 1265
x1-x8一共是8列，需要合并成一列，把x1的colSpan设置为8，x2-x8的colSpan设置为0。 columns: [{ title: '日期', dataIndex: 'date', key: 'date' }, { title: '批次号', dataIndex: 'batchNo', key: 'batc.
Ant Design Vue 动态表头与数据填充教程
学习编程的小羊的博客
06-11 648
安装并引入 Ant Design Vue 组件库。准备动态表头和数据的状态。发起请求获取表头和数据。将获取到的表头和数据赋值给组件的状态。使用a-table组件渲染表格，并传入动态表头和数据。根据需要为表格添加样式。
Ant Design 表格：循环展示表头，表头添加图标icon
Crazy_GirlLL的博客
11-22 3273
需求背景： 用来统计房间里住户的信息 实现效果：​​​​​​​​​​​​​​ 实现过程： 表头：问题a，问题b，问题c，是从动态数据循环获取得到的，包括右侧的icon，和鼠标以上显示的效果：tooltip 以下是代码实现： 使用时，须引入Ant Design <template> <div style="margin-bottom:30px"> <div style="margin-bottom:20px">{{question.n..
antdesign vue 表格动态合并（动态数据，纯前端）
weixin_43465396的博客
09-23 2453
antdesign vue ----table <template> <a-table :columns="columns" :data-source="data" bordered</a-table> </template> <script> // data为数据 const data = [ { projectName: "项目3", projectDetail: "业务招待费", individualAccount:
【Ant Design Vue】Ant Design Vue实战教程：动态构建数据表格表头
weixin_43298211的博客
06-14 687
在使用Ant Design Vue开发项目时，动态生成表头和填充数据是一个常见需求，特别是在处理来自后端API的不确定或可变结构的数据时。Ant Design Vue的组件提供灵活的方式来处理这种场景。下面将详细介绍如何实现动态表头的生成及数据填充。
Ant-Design-Vue动态表头并填充数据
Weirdo的博客
06-04 1542
在 Ant Design Vue 的a-table组件中，除了基本的动态表头和数据填充之外，还有很多高级功能可以提升用户体验和交互性。接下来，我们将探讨如何在动态表头中应用自定义渲染和排序功能。有时，我们可能需要对表格中的某些列进行自定义渲染，比如添加链接、按钮、图标等。这可以通过在columns数组中的对应列对象中添加属性来实现。// ... 其他代码 ...// ... 其他代码 ...methods: {
antd vue table跨行合并单元格,并且自定义内容实例
01-18
ant-design-vue版本：~1.3.8 需求：表格实现跨行合并，并且在合并完的单元格中显示图片 效果图： 源码： export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/assets/produit/99.png'), varTable: { cloumns: [ { title: '置信度', dataIndex:
table多行表头合并 vue_vue elementUI table 自定义表头和行合并的实例代码
weixin_39634508的博客
12-20 902
最近项目中做表格比较多，对element表格的使用，只需要传递进去数据，然后写死表头即可渲染。但现实中应用中，如果写死表头，并且每个组件中写自己的表格，不仅浪费时间而且消耗性能。这个时候需要动态渲染表头。而官方例子都是写死表头，那么为了满足项目需求，只能自己来研究一下。1、自定义表头代码如下，其实就是分了两部分，表格主数据是在TableData对象中，表头的数据保存在headerDatas，hea...
如何在Ant-Design-Vue中实现动态表头并填充数据
06-06 2022
在现代前端开发中，基于Vue.js的Ant Design Vue已经成为许多开发者构建高质量用户界面的首选工具之一。它提供了一整套丰富的UI组件，其中的Table组件广泛应用于数据展示和操作。本文将深入探讨如何在Ant Design Vue中实现动态表头并填充数据，以满足复杂多变的业务需求。
Ant Design of Vue —— Table表格组件 —— 设置动态表头（固定下的动态）
当历史只剩罪恶，唯有推倒重来，我们开创文明，我们传承文明，周而复始，生生不息。
02-01 4682
需求：表格的表头，需要动态改变 效果图 实现步骤： 一、表头数据columns columns: [ { // title:'y1', scopedSlots:{ title:'y1' }, align:"center", dataIndex: 'y1' }, { // title:'y2', scopedSlots:{ title:'y2'
Ant Design of Vue —— Table动态表头（顺序切换和控制显隐）
a573563418的博客
09-22 4333
【代码】Ant Design of Vue —— Table动态表头（顺序切换和控制显隐）
Vue动态生成列表表头（ant-design)
weixin_43799793的博客
01-27 1005
Vue动态生成列表表头（ant-design）
【Ant-Design-Vue】8、综合示例：动态表头与数据填充
weixin_52938153的博客
06-10 847
通过本节的综合示例，我们展示了如何在 Ant-Design-Vue 中实现一个具有动态表头和数据填充的复杂表格。这个示例结合了之前介绍的各种功能，包括动态生成表头、数据绑定、排序、筛选、分页和交互事件处理。掌握这些技巧可以帮助我们构建功能丰富、用户友好的表格组件，提升应用的用户体验和交互性。在前几节中，我们逐步介绍了 Ant-Design-Vue 表格的基础功能、高级功能以及事件与交互。本节将综合前面的知识点，提供一个完整的示例，展示如何实现一个具有动态表头和数据填充的复杂表格。字段，添加了筛选功能。
Ant Design Vue，＜a-tabel＞进行纵向数据的动态合并
Sea_Fest的博客
04-23 1308
写了一些方法让相同数据的行进行上下合并，可能不是最优解，仅提供一个解决思路，渣代码，望谅解 最终效果： 思路就是，传入数据源，表头，需要合并的项，然后计算这一行向下有多少个相同的数据就合并多少个单元格，并且被合并的单元格需要obj.attrs.rowSpan = 0 因为需要合并的项是不确定的，我创建了一个对象obj[dataIndex]去记录一些需要用到的变量 引入这个组件：传入的参数有三个 columns表头 dataSource数据源 customRenderList 需要合并的项，其中前两项和a
ant design vue2表格 动态表头
05-30
Ant Design Vue 2 表格支持动态表头，可以通过 `columns` 属性设置表头配置数组，然后在组件中动态修改这个数组来实现动态表头。 以下是一个示例： ```html <template> <a-table :columns="columns" :data-source="dataSource"></a-table> </template> <script> export default { data() { return { columns: [ { title: '姓名', dataIndex: 'name', key: 'name' }, { title: '年龄', dataIndex: 'age', key: 'age' } ], dataSource: [ { key: '1', name: '张三', age: 18 }, { key: '2', name: '李四', age: 20 } ] } }, mounted() { // 在这里修改 columns 数组来实现动态表头 this.columns.push({ title: '性别', dataIndex: 'gender', key: 'gender' }) } } </script> ``` 以上示例在组件的 `mounted` 钩子函数中动态添加了一个名为“性别”的表头列。你也可以根据需要在其他地方修改 `columns` 数组来实现动态表头。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值