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

最新推荐文章于 2024-07-25 10:02:12 发布
最新推荐文章于 2024-07-25 10:02:12 发布
阅读量2k 收藏 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
							}
						}
					}
				}
			},
又是重名了
关注
专栏目录
Vue3 - Arco Design Vue 表格组件a-table“表格行数据中又嵌套了二维对象数组“，按平级循环渲染(嵌套数组视为同级行数据)， 对嵌套的数组循环展示为表格，智能合并行或列详细教程
王佳斌
07-02 1714
vue3，nuxt3，arco-design-vue，table表格组件，a-table，vue3 arco表格组件，平常都是数组中一个对象渲染成一行，每行中还有嵌套数组怎么办，每个行数据下还有一个数组怎么显示，怎么把表格相同的数据合并为一行，合并上下两行相同数据单元格，合并行或列如果遇到相同单元格就合并为一个，合并上下两行相同数据单元格，数据中有二维数组怎么遍历循环显示，表格数据带二级数组怎么循环渲染显示，表格数据中存在一个数组要怎么才能显示到表格，a-table表格合并详细教程示例，table表格如果对
VUE2 解决element Ui 表格，展开行与合并行不能通同时使用的问题
m0_63464623的博客
03-21 336
【代码】VUE2 解决element Ui 表格，展开行与合并行不能通同时使用的问题。
vue+element实现表格合并
最新发布
qq_45810474的博客
07-25 185
通过对数据进行一个加工在每一条数据中加入向下合并多少的标识再通过span-method方法来实现合并。主要使用element-ui中的el-table中有个方法叫做span-method。通过这个方法可以实现表格行合并。
合并单元格及统计 element-ui + vue
一个前端工作者的博客
12-06 1148
表格列的合并，依据不同需求进行不同的合并。
拖拽的方式使用qbuttongroup_基于Vue和H5（Drag）的拖拽式表格
weixin_39682412的博客
11-30 256
先上最终效果图拖拽式表格是如何设计的？我想大家可能对拖拽式表单，拖拽式图表有所了解过。如这样： 或者是这样的 那么拖拽式表格到底是什么样的呢，我们来看看设计页面！实现一个拖拽式表格需要哪些功能？其实不难看出，拖拽模式下的产物往往离不开以下几个功能：拖拽（这里使用h5的drag）组件（控件）的数据源拖拽时的渲染方式撤销与恢复（方便我们设计表格）拖拽式表格的核心功能点如下：组件分为统计字段...
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
Vue 使用js-xlsx导出、树形数据合并
ZhangYuan2HH的博客
01-14 5278
Vue 使用js-xlsx导出、树形数据合并 前言：本文档是经过网上查询资料，结合自己的业务整理出来的知识点，希望对看到文档的人有帮助。 实现功能：1.vue使用xlsx基本导出 2.导出合并单元格 已树形数据为例。 数据格式： [{ "id": "1", "cityId": "222401", "createUser": "延边分公司传输测试账号", "createTi...
ant-desing-vue table 可伸缩列在固定列、多级表头情况下的实现以及问题解决
子非渔
05-26 4898
这个东西本来以为手到擒来，因为在官网中已经给出了例子，但是果然还是不能太信任官方，官方给出来的只能是最基础的，然后我们正常的使用场景往往要复杂很多，比如固定列， 比如固定表头，比如自带checkbox列，比如多级表头的情况。要想满足这些情况往往需要自行开发。 1.首先蒋官方的例子copy下来，居然拖不动。 对照了一下官方，css居然都不一样，于是增加了第一个改动 因为style内联样式自带了 translate属性，所以直接去掉right：0；只留left -5.height设置100%就可以。 ...
vue基础知识总结及测试遇到的前端bug分析
D321xiaoding的博客
04-03 1814
vue基础知识总结、测试遇到的前端bug分析原因
2023高薪前端面试题（三、前端进阶——Vue）
iaz999的博客
05-16 1489
Vue所有的界面事件，都是只去操作数据的，Jquery操作DOMVue所有界面的变动，都是根据数据自动绑定出来的，Jquery操作DOMMVC是应用最广泛的软件架构之一,一般MVC分为:Model(模型),View(视图),Controller(控制器)。这主要是基于分层的目的,让彼此的职责分开.View一般用过Controller来和Model进行联系。Controller是Model和View的协调者,View和Model不直接联系。基本都是单向联系。M和V指的意思和MVVM中的M和V意思一样。
前端面试-vue 部分
wanglu458512的博客
09-16 446
一、vue基础 Vue中的MVVM MVVM **(Model-View-ViewModel)**也称(Model-View-Binder) Model数据层，数据和业务逻辑都在Model层中定义； View视图层，在前端开发中通常就是DOM层，主要用于给用户展示各种信息； ViewModel视图模型层，是View和Model沟通的桥梁 响应式原理： Model和ViewModel之间有着双向数据绑定的联系。ViewModel它实现了Data Binding，可以将Model的改变实时的反应到View中。另
vue单元格多列合并的实现
01-21
一.多列合并 1.在el-table中添加:span-method=objectSpanMethod属性来控制合并单元格，如下图 2.合并代码，每一列都要设置一个不同的key，这样可以防止合并的时候上下内容一样导致错误的问题 objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { if (this.myObj[row.channel_type].start === rowIndex) { return { rowspan: this.
Vue中常见的面试题及知识点
DJxyyy的博客
11-13 992
前端Vue常见的面试题 掌握以下的Vue面试题 面试如虎添翼 请耐心看完 1 . MVC、MVP与MVVM模式 MVC： MVC是应用最广泛的软件架构之一，一般MVC分为： Model（ 模型 ）、Controller（ 控制器 ）、View（ 视图 ）。 这主要是基于分层的目的，让彼此的职责分开。View 一般通过 Controller 来和 Model 进行联系。Controller是 Model 和 View 的协调者，View和Model不直接联系。基本联系都是单向的。 1、View 传送指令
ant design vue 树形菜单合并元格
weixin_36878452的博客
03-12 342
合并单元格
vue表格拖拽
九段刀客的博客
02-03 983
实现效果 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 引入样式 --> <link rel="stylesheet" href="https:...
Vue开发实战二十二：列表中表格动态合并的实现
博主逸尘
06-20 899
Vue+elementUI实现table中表格的动态合并
antd table rowSelection多选框(可选择列表)
热门推荐
MYG_G
11-11 2万+
可选择列表 如上图，是antd的可选择列表，我们如何将普通列表变成可选择列表呢，这就用到了一个很重要的属性rowSelection。 rowSelection 如下图，rowSelection属性是一个对象，他有很多的参数。 下面是antd官网截图，关于rowSelection的功能配置。 指定可选择列的属性作为key 注意：其中有个很重要的点,就是selectedRowKeys默认取得是列表的第一项，如果你想指定key,就要在table增加rowKey={record => record.id}
vue原生表格合并(后端返回ztree数据格式)
kingofXIAN的博客
03-27 1334
项目是用vue做的，引入jquery-ztree实现树形菜单展示，为了化出想要的动态渲染表格效果，所以需要处理数据。 思路：表格合并，还是使用原生的表格嵌套(表格中嵌套表格）。对后端返回的数据进行处理。 首先看效果图： 后台返回的数据： 为了实现想要的结果就得对后台的数据进行处理： 处理步骤： 1、ztree为级联选中状态，因为只有选择1/2/3级节点才会出现想要的效果。首先为...
electron-vue 实践 2 —— excel 合并
linshuhe1的专栏
06-28 1929
前言 之前使用 vue-cli 和 electron-vue 创建了工程，接下来就开始实现具体的逻辑，我们的目标很简单，就是将一张或多张表中的所有 sheet 页内容都垂直或水平合并在一个 sheet 中，并生成一张新的表。   UI 布局文件 新加一个 .vue 后缀的文件，vue 的 UI 文件格式大致如下，不了解的可以查看 官方入门文档 ： &lt;template&gt; ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

又是重名了

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

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

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

打赏作者

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

抵扣说明：

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

余额充值