Vue表格合并（记录一次难以完成的需求）

最新推荐文章于 2023-09-14 22:26:27 发布
最新推荐文章于 2023-09-14 22:26:27 发布
阅读量1.8k 收藏 7
点赞数 1
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44077141/article/details/107606891
版权

Vue中el-table

这一次是我接触Vue以来接触到的最难得需求，但是其实说起来也不算难，基本上就是完成一个图表，但是这个图标的话需要去完成一个表头的合并，对于相同的列进行表头的合并。

具体需求：

在这里插入图片描述在这里插入图片描述
其实这个需求也就是说完成一个周报的功能而已，也是简单的实现一个增删改差。
让我们仔细分析一下里面的内容，首先这两个表格是在一个页面中，你如果要完成这个功能的话就要去考虑一个问题，就是如何将这个两个页面放在一起，项目经理给我们规划出了基本的样式，但是我们可以进行小规模的修改，首先在这里我想的是用一个table页，入下图
在这里插入图片描述
这样就省去了一部分使用下拉菜单的点击事件的功能
然后我们就迎来了我有史以来遇到的最难的需求，首先一个公司一个时间段有多个项目，一个项目有各种的金额，类型合同金额，限价，周完成金额，年完成金额，自开工完成金额，总体来说就是有各种的金额，按分公司的分类情况，需要考虑的是一个时间段会有一个小计，这里的小计包括了这个时间内这个公司的所有金额的综合，看到这里你们可能会觉得这不就一个求和吗，使用一个后端求和放进去不就行了吗，但是我们最大的问题是如何展示。
首先我们想到的展示方法，是通过在两张表的形式，一张是时间的表格，一个是在这个时间里面的所有的项目的表，这个倒是也不难，

在这里插入图片描述
（没有具体的实现的图了就是这个意思或者我给你们粘一张element-ui里面的）

在这里插入图片描述
具体的代码就是放在一个expand的类型的table的标签里面

<el-table-column type="expand">
		<template slot-scope="scope1">
				<el-table ref="listTable" class="subtable" :data="scope1.row.children" @selection-change="dataListSelectionChangeHandle"	 @sort-change="dataListSortChangeHandle" border style="margin-top: -10px;margin-left: 100px;" size="small"			 v-loading="dataListLoading">
				<el-table-column prop="projectName" label="项目名称" header-align="center" align="center" width="100"></el-table-column>
				<el-table-column prop="projectTypeName" label="项目类型" header-align="center" align="center" width="100"></el-table-column>
				<el-table-column prop="fixedPrice" label="限价" header-align="center" align="center" width="100"></el-table-column>
				<el-table-column prop="contractAmount" label="合同金额" header-align="center" align="center" width="100"></el-table-column>
				<el-table-column prop="changedAmount" label="变更后合同金额" header-align="center" align="center" width="100"></el-table-column>
				<el-table-column prop="weekAmount" label="本周完成金额" header-align="center" align="center" width="100"></el-table-column>
				<el-table-column prop="yearAmount" label="本年累计完成金额" header-align="center" align="center" width="100"></el-table-column>
					<el-table-column prop="allAmount" label="自开工累计完成金额" header-align="center" align="center" width="100"></el-table-column>
					<el-table-column prop="finishPercent" label="完成百分比" header-align="center" align="center" width="100"></el-table-column>
					<el-table-column prop="budgetAmount" label="预算金额" header-align="center" align="center" width="100"></el-table-column>
					<el-table-column align="center" header-align="center" label="操作" width="100">
			<template slot-scope="scope">
					<el-button @click="addOrUpdateHandle(scope.row.id)" size="small" type="text">修改</el-button>
					<el-button @click="deleteHandle(scope.row.id)" size="small" type="text">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</template>
</el-table-column>

其实到这里也是没有任何的问题，然后我满心的欢喜去给我们的项目经理看了
在这里插入图片描述
然后又被打回来，因为呢，他要将相同日期的公司名进行合并，然后我去找api，在el-table里面找到一个属性，:span-method="objectSpanMethod"这个方法就是在初始化table的时候将我们指定的行进行合并

objectSpanMethod({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (columnIndex === 0) {
					if (rowIndex == 0) {
						let num = 0
						for (let i = rowIndex + 1; i < this.dataListByCompary.length; i++) {
							if (this.dataListByCompary[i].companyName == this.dataListByCompary[rowIndex].companyName) {
								num++
							}
						}
						return {
							rowspan: num + 1,
							colspan: 1
						}
					} else if (rowIndex == this.dataListByCompary.length - 1) {
						if (this.dataListByCompary[rowIndex - 1].companyName != this.dataListByCompary[rowIndex].companyName) {
							return {
								rowspan: 1,
								colspan: 1
							}
						} else {
							return {
								rowspan: 0,
								colspan: 0
							}
						}
					} else {
						if (this.dataListByCompary[rowIndex - 1].companyName != this.dataListByCompary[rowIndex].companyName) {
							let num = 0
							//如果此行的数据跟上一行不相同说明从这一行开始合并，如果相同返回0,0
							for (let j = rowIndex + 1; j < this.dataListByCompary.length; j++) {
								if (this.dataListByCompary[j].companyName == this.dataListByCompary[rowIndex].companyName) {
									num++
								}
							}
							return {
								rowspan: num + 1,
								colspan: 1
							}
						} else {
							return {
								rowspan: 0,
								colspan: 0
							}
						}
					}
				}
			},

在这个方法里面一共是传入四个参数，分别是行对象，列对象，行号，列号，然后我们判断第一列的时候，就是分公司信息的一列，然后我们开始遍历行的情况，我这边分为了三种情况，第一种是第一行的情况，然后就是最后一行的情况，除了第一行和最后一行的情况，我这里没有用一些花里胡哨的方法，因为这里的遍历可以使用很多的方法，例如说是递归，但是因为避免bug我们就是用了这种简答的方法，然后我完成了这样的效果
在这里插入图片描述然后我又被打回了，原因呢很简单，项目经理想要
在这里插入图片描述
这个样子的树形的，想要子表和父表的一个合并，共用一个表头，可以让我们在看的时候更加的表遍历，于是我又去看了，终于这一次冲突了，合并和树形下拉只能要一个，因为这样的在头上的树形是直接在表的属性上添加:tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="id"，首先是要他的表头是一个所有的你只是要把你要的元素穿进去就可以了，子表的数据名称叫做children的就可以了，然后根据一个不可以重复的属性 row-key就可以完成，但是很不巧我们的表头合并了，他也就是无法进行展开了。问题找到了但是怎么解决呢？我想到既然树形的无法完成那么我就还是普通的下拉但是通过前段将子表的表头取掉并且控制位置在父表的列下面。
然后新的问题出现了，因为我们合并行，所以当我们再展开子表的时候会将父表中已经合并的的一行挤下去造成乱位，然后更加尴尬的是我们的合并方法修改合并的行的方法只能够在初始化table的时候生效，现在我们只能够大改，去掉子表的概念才能将我们的需求显示出来，然后我又开始了大改，效果图大概是下面的
在这里插入图片描述
因为传入的数据变了我们的对应的传给前段的数据也变了，所以我们前段合并的方法也是要变化的。合并的时候不仅仅要将公司进行合并，相同公司相同日期的也要进行合并，下面就是新的合并的方法

objectSpanMethod({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (columnIndex === 0) {
					if (rowIndex == 0) {
						let num = 0
						for (let i = rowIndex + 1; i < this.dataListByCompary.length; i++) {
							if (this.dataListByCompary[i].companyName == this.dataListByCompary[rowIndex].companyName) {
								num++
							}
						}
						return {
							rowspan: num + 1,
							colspan: 1
						}
					} 
					else 
					if (rowIndex == this.dataListByCompary.length - 1) {
						if (this.dataListByCompary[rowIndex - 1].companyName != this.dataListByCompary[rowIndex].companyName) {
							return {
								rowspan: 1,
								colspan: 1
							}
						} else {
							return {
								rowspan: 0,
								colspan: 0
							}
						}
					}
					 else {
						if (this.dataListByCompary[rowIndex - 1].companyName != this.dataListByCompary[rowIndex].companyName) {
							let num = 0
							//如果此行的数据跟上一行不相同说明从这一行开始合并，如果相同返回0,0
							for (let j = rowIndex + 1; j < this.dataListByCompary.length; j++) {
								if (this.dataListByCompary[j].companyName == this.dataListByCompary[rowIndex].companyName) {
									num++
								}
							}
							return {
								rowspan: num + 1,
								colspan: 1
							}
						} else {
							return {
								rowspan: 0,
								colspan: 0
							}
						}
					}
				}
			if (columnIndex === 1) {
					if (rowIndex == 0) {
						let num = 0
						for (let i = rowIndex + 1; i < this.dataListByCompary.length; i++) {
							if (this.dataListByCompary[i].reportDateTo == this.dataListByCompary[rowIndex].reportDateTo
							&&this.dataListByCompary[i].companyName == this.dataListByCompary[rowIndex].companyName) {
								num++
							}
						}
						return {
							rowspan: num + 1,
							colspan: 1
						}
					} else if (rowIndex == this.dataListByCompary.length - 1) {
						if (this.dataListByCompary[rowIndex - 1].reportDateTo != this.dataListByCompary[rowIndex].reportDateTo
						&&this.dataListByCompary[rowIndex - 1].companyName == this.dataListByCompary[rowIndex].companyName) {
							return {
								rowspan: 1,
								colspan: 1
							}
						} else {
							return {
								rowspan: 0,
								colspan: 0
							}
						}
					} else {
						if (this.dataListByCompary[rowIndex - 1].reportDateTo != this.dataListByCompary[rowIndex].reportDateTo
						||this.dataListByCompary[rowIndex - 1].companyName != this.dataListByCompary[rowIndex].companyName
						) {
							let num = 0
							//如果此行的数据跟上一行不相同说明从这一行开始合并，如果相同返回0,0
							for (let j = rowIndex + 1; j < this.dataListByCompary.length; j++) {
								if (this.dataListByCompary[j].companyName == this.dataListByCompary[rowIndex].companyName
								&&this.dataListByCompary[j].reportDateTo == this.dataListByCompary[rowIndex].reportDateTo) {
									num++
								}
							}
							return {
								rowspan: num + 1,
								colspan: 1
							}
						} else {
							return {
								rowspan: 0,
								colspan: 0
							}
						}
					}
				}
			},
又是重名了
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
vue.js实现表格合并示例代码
10-21
最近工作中遇到一个需求，是要做一个页面放张大表格用来显示数据项，纯粹为了view层操作方便，就用了vue做渲染。然而又被提出了一个需求，需要相邻的相同值的行数据项进行单元格合并，这就醉了。没办法，只能想办法解决，下面通过这篇文章来一起看看吧。
Vue实现数据表格合并列rowspan效果
10-16
主要为大家详细介绍了Vue实现数据表格合并列rowspan效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue+element+sortable.js实现表格拖拽多条数据
weixin_46054723的博客
02-21 1232
Table表格数据合并、拆分、单条与多条拖动。 vue+element+sortable.js实现表格拖拽多条数据。安装：npm install sortablejs --save。
Vue实战（四）：实现普通表格的行拖拽
阿标的博客
05-25 785
实现表格的行拖拽
vue3+elementPlus+sortablejs实现表格行列拖拽
weixin_63203565的博客
04-29 2818
点击拖拽表头就可以改变列的顺序，点击行上下拖拽就可以改变行的顺序。vue3+elementPlus+sortablejs实现表格行列拖拽
vue动态合并单元格并添加小计合计功能示例
01-22
1、效果图 2、后台返回数据格式（平铺式） 3、后台返回数据后，整理所需要展示的属性存储到（items）数组内 var obj = { id: curItems[i].id, feeName: curItems[i].feeName, projectName: curItems[i].projectName, projectDetailsName: curItems[i].projectDetailsName, zbMoney: curItems[i].zbMoney, qyMoney: curItems[i].qy
el-table的合并和拖拽
TwilighTzvz的博客
05-16 545
el-table的合并单元格和拖拽排序的用法
Vue - vxe-table 表格合并行应用
技术共享，共同进步！
05-19 2934
Vue - vxe-table 表格合并行应用一. 将相同的列数据合并为一行实现效果实现方法二. 拓展合并：根据某个字段合并后的数据 进行合并其他字段列实现效果实现方法 vxe-table 地址：https://vxetable.cn/v2/#/table/start/install 一. 将相同的列数据合并为一行 实现效果 实现方法 使用 API 中的 span-method 方法： span-method 使用方法<vxe-grid border resizable a
ag-grid-vue如何实现悬浮框、可拖拽、可编辑、动态合并等功能
trabecula_hj的博客
02-22 2481
ag-grid-vue如何实现悬浮框、可拖拽、可编辑、动态合并等功能
vue2+element-ui表格组件合并单元格的几种情况
最新发布
2301_76925705的博客
09-14 3679
https://img-blog.csdnimg.cn/bdfc18f2a0c0478f904b0af9c49626a2.jpeg
vue实现表格合并功能
01-18
本文实例为大家分享了vue实现表格合并功能的具体代码，供大家参考，具体内容如下 1、背景 本身有vue进行渲染的数据表格，，但是出于整体考虑，需要对相同的列信息进行单元格合并。 由于使用的是vue，想到MVVM是要用...
Vue Elenent实现表格相同数据列合并
01-22
本文实例为大家分享了Vue Elenent实现表格相同数据列合并的具体代码，供大家参考，具体内容如下 作者：秋名 思路：后台查询表格数据，查询出来后直接传到前端，前端通过foreach循环，然后对相同的表格进行合并。（同...
vue通过数据过滤实现表格合并
10-16
主要为大家详细介绍了vue通过数据过滤实现表格合并，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue实现数据从前端到后台的传递
热门推荐
又是重名了
07-01 1万+
前后端的数据传递的几种方式，其中由于是有公司开放的框架所以你们有的方法不一定适用。 第一种 deleteHandle(id) { var ids = id ? [id] : this.dataListSelections.map(item => { return item.id; }); this.$confirm(`确定${id ? "删除" : "批量删除"}?`, "提示", { confirmButtonText: "确定", cancelB
Vue项目中常用的两种页面转换方法
又是重名了
07-01 6723
也是在做这个项目其中呢涉及到页面的转换，一共有两种方式其实，第一种就是完成一个el-dialog还有一种就是转换一个页面，原理差不多但是里面还有一些东西值得我们去考虑。 el-dialog的方式 就是通过弹窗的方式，其实就是完成一个弹窗，首先呢，我们需要先引入这个el-dialog组件 import AddOrUpdate from './defect-rectification-notice-addorupdate' 根据具体的路径完成一个组件页面的引入，并且取名叫做AddOrUpdate，然后根据规则
el-form表单需要注意的问题（表单刷新，规则的设定，非空提交）
又是重名了
07-01 2345
我们完成表单提交的时候会需要遇到问题 表单提交之后数据没有刷新，依旧保留着上一次提交的数据 你第一次点击新增填完数据，或者是点击修改数据之后，再一次打开这个dialog的时候会发现携带上次的数据，这其实是在el-form组件上面定义过这个功能，就是this.$refs['dataForm'].resetFields()中的resetFields方法来完成的，这个方法能够使用是有一个前提的，那就是每一个form表单中的数据必须要有制定的规则， 表单提交的规则 也就是 <el-form label-wid
VUE中的时间转换成java对象中的Date类型属性报错解决方法
又是重名了
07-01 2293
遇到一个问题如果你通过@RequestBody注解穿进来一个实体类的情况下，当实体类的中存在Data类型时，会出现类型转换的问题，首先把新增的前段提交代码展示一下。 async dataFormSubmit(num) { let valid = await this.$refs.dataForm.validate().catch(() => { return util.$message.showInfo2('校验错误') }) if (!valid) return
Vue输入的规则自定义设定
又是重名了
07-27 1382
在完成一个功能的时候要求实现一个要求，就是输入的数据不能为空并且要小数点后两位，我知道是使用了:rules="dataRule"在el-form上面，然后自定义的情况还是一个写，我在这里记录一下 我们在完成一个表单提交的时候可能需要对方提交的数据是一个合法的数据而不是一个不合法的数据，我们需要在这里实现一个自定的规则。 首先在el-form上面添加<el-form :model="dataForm" :rules="dataRule" label-width="200px" ref="dataForm
ant design vue 表格合并
07-27
在Ant Design Vue中，可以通过自定义渲染函数来实现表格的合并单元格功能。具体的实现方法如下： 1. 首先，定义一个包含合并单元格逻辑的自定义渲染函数。在该函数中，可以通过设置`attrs`对象的`rowSpan`属性来指定需要合并的行数。例如，如果要合并某一列的前两行，可以设置`rowSpan: 2`。 2. 在表格的`columns`属性中，使用自定义渲染函数来控制需要合并单元格的列。在`customRender`属性中，返回一个包含`children`和`attrs`的对象，其中`children`表示单元格的内容，`attrs`表示单元格的属性。 下面是一个示例代码，演示了如何在Ant Design Vue中实现表格的合并单元格功能： ```javascript const columns = \[ { title: 'Name', dataIndex: 'name', customRender: (value, row, index) => { const obj = { children: value, attrs: {}, }; if (index === 2) { obj.attrs.rowSpan = 2; } return obj; }, }, // 其他列的配置... \]; const data = \[ { name: 'John', age: 32 }, { name: 'Tom', age: 28 }, { name: 'Jerry', age: 25 }, { name: 'Alice', age: 30 }, \]; <Table :columns="columns" :dataSource="data" /> ``` 在上述代码中，通过设置`obj.attrs.rowSpan`来实现了对第三行和第四行的合并单元格操作。你可以根据自己的需求，修改`customRender`函数中的逻辑来实现更复杂的合并单元格操作。 #### 引用[.reference_title] - *1* [Ant Design Vue实现a-table表格单元格合并（列/行合并）](https://blog.csdn.net/a18792627168/article/details/108196198)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Ant design vue table 合并写法（详细代码-行合并）](https://blog.csdn.net/qq_43468165/article/details/122325234)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [ant design vue表格合并](https://blog.csdn.net/weixin_42812634/article/details/122727848)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

又是重名了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值