elementui table 合并列

最新推荐文章于 2024-06-21 17:30:00 发布
最新推荐文章于 2024-06-21 17:30:00 发布
阅读量554 收藏
点赞数
文章标签： elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46391404/article/details/132740747
版权

在这里插入图片描述

<template>
	<div class="container">
		<el-table :data="tableData" :border="true" :header-cell-style="{ 'font-weight': 'normal', 'text-align': 'left' }"
			:cell-style="{ 'text-align': 'left' }" size="mini" style="width: 100%" :span-method="arraySpanMethod">
			<el-table-column type="index" label="序号" width="100"></el-table-column>
			<el-table-column prop="product_name" label="名称1"></el-table-column>
			<el-table-column prop="cap_name" label="名称2"></el-table-column>
			<el-table-column prop="name3" label="名称3"></el-table-column>
			<el-table-column prop="name4" label="名称4">
				<template slot-scope="scope">
					<el-input v-model="scope.row.name4" placeholder="请输入设备名称" maxlength="30" show-word-limit @input="inputFn" />
				</template>
			</el-table-column>
			<el-table-column prop="name5" label="名称5">
				<template slot-scope="scope">
					<el-input v-model="scope.row.name5" placeholder="请输入设备名称" maxlength="30" show-word-limit @input="inputFn" />
				</template>
			</el-table-column>
			<el-table-column prop="name6" label="总计">
				<template slot-scope="scope">
					<span>{{Number(scope.row.name5).toLocaleString() + Number(scope.row.name4).toLocaleString()}}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button @click="addRow()" class="button" type="text" size="small"> <i
							class="el-icon-circle-plus-outline"></i></el-button>
					<el-button @click="deleteEach(scope.row)" v-if="!scope.row.span" class="button" type="text" size="small">
						<i class="el-icon-remove-outline"></i></el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-table :data="tableData2" :border="true" :show-header="false"
			:header-cell-style="{ 'font-weight': 'normal', 'text-align': 'left' }" :cell-style="{ 'text-align': 'left' }"
			size="mini" style="width: 100%" :span-method="arraySpanMethod">
			<el-table-column label="序号" width="100">
				<template slot-scope="scope">
					<span>{{ ((currentPage-1)*pageSize+scope.$index+1 + tableData.length) }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="product_name" label="名称1"></el-table-column>
			<el-table-column prop="cap_name" label="名称2"></el-table-column>
			<el-table-column prop="name3" label="名称3"></el-table-column>
			<el-table-column prop="name4" label="名称4"></el-table-column>
			<el-table-column prop="name5" label="名称5"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button @click="addRow2()" class="button" type="text" size="small"> <i
							class="el-icon-circle-plus-outline"></i></el-button>
					<el-button @click="deleteEach2(scope.row)" v-if="!scope.row.span" class="button" type="text" size="small">
						<i class="el-icon-remove-outline"></i></el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>
<script>
	export default {
		name: 'tableCom',
		data() {
			return {
				// 注释：示例是用参数-product_name进行处理-该例好像只有数据是连续aaaa  或  bbbb才可以（第一条是a第二条是a第三条是b---不能第二条是b，第三条是a）
				tableData: [{
						product_name: '合同类支出',
						name3: '合同类支出',
						name4: null,
						name5: 0,
						span: true,
						name6: null,
						cap_name: '合同类支出'
					},
					{
							product_name: '合同类支出',
							cap_name: '合同类支出',
							name3: '合同类支出',
							name4: 4,
							name5: 0,
							span: true,
							name6: 0
						},
					{
						product_name: '集团总部小计',
						cap_name: '集团总部小计',
						name3: '集团总部小计',
						name4: 24,
						name5: 0,
						span: false,
						name6: 0
					}
				],
				tableData1: [{
						product_name: '合同类支出',
						cap_name: '合同类支出',
						name3: '合同类支出',
						name4: 'name14',
						name5: 0,
						span: true
					},
					{
						product_name: '集团总部小计',
						cap_name: '集团总部小计',
						name3: '集团总部小计',
						name4: 'name24',
						name5: 0,
						span: false
					}
				],
				tableData2: [{
						product_name: '非合同类',
						cap_name: '非合同类',
						name3: '非合同类',
						name4: 'name14',
						name5: 0,
						span: true
					},
					{
						product_name: 1,
						cap_name: 1,
						name3: 'name23',
						name4: 'name24',
						name5: 0,
						span: false
					}
				],
				tableData3: [{
						product_name: 'tong',
						cap_name: 'tong',
						name3: 'tong',
						name4: 'name14',
						name5: 0,
						span: true
					},
					{
						product_name: 1,
						cap_name: 1,
						name3: 'name23',
						name4: 'name24',
						name5: 0,
						span: false
					}
				],
				currentPage: 1,
				pageSize: 10
			};
		},
		methods: {
			inputFn() {
				console.log('inputFn', this.tableData)
			},
			arraySpanMethod({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				// 合并行  产品名字相同合并
				// if (columnIndex === 1) {
				// 	if (rowIndex === 0 || row.product_name != this.dataSource[rowIndex - 1].product_name) {
				// 		let rowspan = 0;
				// 		this.dataSource.forEach(element => {
				// 			if (element.product_name === row.product_name) {
				// 				rowspan++;
				// 			}
				// 		});
				// 		return [rowspan, 1];
				// 	} else {
				// 		return [0, 0];
				// 	}
				// }

				// 合并列 名称值都为1 的合并
				let colspan = 0;
				let colkeys = Object.keys(row);
				let currentindex = columnIndex - 1;
				if (row[colkeys[currentindex]] === '合同类支出' || row[colkeys[currentindex]] === '非合同类' || row[colkeys[
					currentindex]] === '集团总部小计') {
					if (row[colkeys[currentindex - 1]] != row[colkeys[currentindex]]) {
						for (let i = currentindex; i < colkeys.length; i++) {
							if (row[colkeys[i]] === '合同类支出' || row[colkeys[i]] === '非合同类' || row[colkeys[i]] === '集团总部小计') {
								colspan++;
							} else {
								break;
							}
						}
						console.log('colspan', colspan)
						return [1, colspan];
					} else {
						return [0, 0];
					}
				}
			},
			deleteEach(row) {
				this.tableData = this.tableData.filter(v => v.id !== row.id);
			},
			deleteEach2(row) {
				this.tableData2 = this.tableData2.filter(v => v.id !== row.id);
			},
			addRow() {
				this.addPublicFn(this.tableData)
			},
			addRow2() {
				this.addPublicFn(this.tableData2)
			},
			addPublicFn(list) {
				let isTable = list.filter(d => d.showfile == true)
				console.log('list', list)
				isTable.length != 0 ? list.push({
					product_name: '',
					cap_name: '',
					name3: '',
					name4: '',
					name5: 0,
					delTag: true,
					id: new Date().getTime()
				}) : list.push({
					product_name: '',
					cap_name: '',
					name3: '',
					name4: '',
					name5: 0,
					delTag: true,
					id: new Date().getTime()
				})
			}
		},
		created() {

		}
	};
</script>
青果小橙子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element 中table表格的合并单元格
小火车况且况且况且的博客
12-10 2440
Element 中table表格的合并单元格 element的官方说明 通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowsp...
vue中Element-ui 表格 (Table)合并行、列单元格
weixin_45618937的博客
02-21 6439
vue中Element-ui 表格 (Table)合并行、列单元格
【element-ui】el-table合并列+合并行
最新发布
weixin_48847755的博客
06-21 616
el-table合并行或列
论element-ui表格的合并行和列（巨细节）
小邹的博客
03-15 1万+
​ 作为一个后端来写前端属实是痛苦、讲真的、刚开始我是真不想用饿了么的这个合并行和列、因为太语焉不详了、看着头疼、后来发现好像我没得选、只好硬着头皮上了。
详解element-ui表格的合并行和列(非常细节)
小墨鱼的前端问题录
12-16 6412
但是此时又有个问题了，如果将 1 ，2行合并，那么应该同时有两个ID值在同一行内、但是我们希望只有一个才行、因此需要用到 第二个 if 中的 else 中内容，即 0，0。​ 一起理解，第二个 if 的作用是：当行号为 0，2 时，即除以 2 的余数为 0。​ （2，1）：表示将自身以及下一行合并，即合并 2 行、将自身的列合并（如果值是 2 那么就是将自身和右边的一起合并）有时候开发中、我每一次需要合并的行数是不一定相同的、第一个需要合并3行，第二个需要合并6行甚至更多，那怎么办？
element-ui/view-ui表格的合并行和列的多种方法（超级详细）
前端探险家的博客
03-29 4435
vue的这两个组件库的表格的行和列的写法是一样的，都是通过span-method方法可以实现的；下面我们就以view ui的表格组件为例；该函数可以返回一个包含两个元素的数组，第一个元素代表 rowspan，第二个元素代表 colspan。也可以返回一个键名为 rowspan 和 colspan 的对象。看上面对该方法的说明太过于官方，我们直接去组件库把实现的效果图拿过来仔细分析一下；
element-ui 表格合并
qq_45915537的博客
09-04 700
elementUI 表格合并 elementUI官方文档的表格合并方法为 span-method // Table 组件 绑定 span-method <Table :data="tableData" :span-method="cellMerge" > data(){ return { spanArr: [], pos: 0, tableData:[ {game_id: 2,game_name: "王者荣耀", scene_id: "2
Element-ui Table 合并行或列
alxw2010的博客
06-02 1223
表格中数值相同且相临的单元格内合并显示
vue elementUI table 自定义表头和行合并的实例代码
10-16
主要介绍了vue elementUI table 自定义表头和行合并的实例代码，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue2+elementui 实现table表格列分割
08-09
以vue组件的方式，实现vue2结合elementui table表格实现列分割，你可以直接将改文件下载下来，然后可以学习span-method方法进行个性化的列分割
优雅的elementUI table单元格可编辑实现方法详解
10-17
在本文中，我们将详细探讨如何优雅地实现 ElementUI Table 的单元格可编辑功能。这个功能允许用户在表格的特定单元格内进行编辑，提高交互性和用户体验。 首先，我们看到在 `APP.vue` 文件中，使用了 `<el-switch>`...
elementUI table表格动态合并的示例代码
10-17
主要介绍了elementUI table表格动态合并的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
elementUI 表格 合并相同数据的列
ravenYoung的博客
06-08 3837
element合并相同数据列表格
element ui 表格合并行和列
Amtion的博客
04-13 5388
element ui 表格合并行和列 <el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%" > <el-table-column v-for="col in columns" :prop="col.dataIndex" :key="col.dataIndex" :label="col.title" align="center"
element-ui中el-table数据合并行和列,应该怎么解决
shi15926lei的博客
11-09 3398
最近接到一个任务,要实现一个数据报表,涉及到很多合并问题,一开始想着原生会简单点,实际上很麻烦,最后还是用elemen-ui中table自带的合并方法.1.数据处理,后端返回来的数据是,一个大对象,包含三个数组,既然合并,肯定是要处理成一个数组,并且要把相同的追加一个属性,后面根据这个属性进行合并处理.5.合并方法,这里是要根据自己的业务请求进行调整处理的。2.请求回来的数据,进行数据处理。
使用小技巧实现el-table组件的合并行功能，ElementUI和ElementPlus都适用
都随它大小便吧
05-10 1万+
有时遇到一些需求，需要实现ElementUI或ElementPlus中，el-tabled组件合并单元格的功能，稍微了解一下它的数据格式，不难可以写出比合并方法。但是在鼠标经过单元行时，会出现高亮的行与鼠标经过的行不一致的BUG。因此还需要实现@cell-mouse-enter和@cell-mouse-leave这两个方法，才可解决此问题。
【element-ui】 el-table 表格动态合并相同数据单元格最全教程，可指定列+自定义合并条件，附完整代码
热门推荐
coderYYY的博客
02-19 2万+
【element-ui】 el-table 表格动态合并相同数据单元格最全教程，可指定列+自定义合并条件，附完整代码
Element-UI中，el-table动态合并多列的行
小匠的Blog
01-11 1338
在使用Element-UI的el-table组件时，我们有时需要根据数据动态合并行或列，以更好地展示数据。在本文中，我们将介绍如何在Element-UI中实现这一功能。
Element UI 的 table 单元格合并
beijixing333y的博客
06-21 1万+
Element UI 的 table 单元格合并
elementui table合并单元格
07-28
在使用ElementUI中的表格合并单元格时，可以按照以下步骤进行操作： 1. 首先，在data中定义需要合并的列的数组和索引。例如，定义column1Arr和column1Index来表示需要合并的第一列的数据和索引，以此类推。\[2\] 2. 接下来，编写合并逻辑的方法。可以使用mergeTable方法来实现合并。在该方法中，可以遍历spanName数组，并在tableData中进行比较，判断当前行与上一行是否相同。如果相同，则将上一行的合并数加1，当前行的合并数设为0；如果不相同，则将当前行的合并数设为1，并更新索引。\[3\] 3. 最后，在表格中使用elementUI中提供的合并方法。可以使用arraySpanMethod方法来指定合并的规则。在该方法中，可以根据columnIndex的值来判断是否需要合并，如果是需要合并的列，则返回合并的行数和列数；否则返回1行1列。\[1\] 通过以上步骤，就可以实现在ElementUI的表格中合并单元格的功能。 #### 引用[.reference_title] - *1* *3* [elementUI中table单元格的合并，通用版](https://blog.csdn.net/weixin_46103180/article/details/126969260)[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,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Element UI 的 table 单元格合并](https://blog.csdn.net/beijixing333y/article/details/125389547)[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,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值