elementui中table表格根据id合并列

最新推荐文章于 2024-10-26 09:44:40 发布

九点五亿少女的梦

最新推荐文章于 2024-10-26 09:44:40 发布

阅读量718

点赞数 3

文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_44856917/article/details/129166039

版权

该文章展示了如何在ElementUI的Table组件中使用`span-method`属性，结合自定义方法`mergeComon`，根据数据中的id字段来合并行。通过比较相邻行的id值，计算出需要合并的行数(rowspan)和列数(colspan)，从而实现表格的动态列合并。

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

elementui中table表格根据id合并列

如图
在这里插入图片描述

代码如下

<el-table :data="tableData" :span-method="objectSpanMethod" border
					style="width: 100%; margin-top: 20px">
					
					<el-table-column prop="id" label="A" width="180">
					</el-table-column>
					<el-table-column prop="name" label="B">
					</el-table-column>
					
					<el-table-column prop="amount1" label="C">
					</el-table-column>
					<el-table-column prop="amount2" label="D">
					</el-table-column>
					<el-table-column prop="amount3" label="E">
					</el-table-column>
					<el-table-column prop="amount3" label="F">
					</el-table-column>
					<el-table-column prop="amount3" label="G">
					</el-table-column>
					<el-table-column prop="amount3" label="H">
					</el-table-column>
			</div>

<script>
			new Vue({
				el: '#app',
				data: function() {
					return {
						last: -1,
						cnt: 1,
						message: '',
						tableData: [{
							id: '3',
							name: '王小虎2',
							amount1: '234',
							amount2: '3.2',
							amount3: 10
						}, {
							id: '3',
							name: '王小虎2',
							amount1: '165',
							amount2: '4.43',
							amount3: 12
						}, {
							id: '3',
							name: '王小虎2',
							amount1: '324',
							amount2: '1.9',
							amount3: 9
						}, {
							id: '8',
							name: '王小虎1',
							amount1: '621',
							amount2: '2.2',
							amount3: 17
						}, {
							id: '9',
							name: '王小虎1',
							amount1: '539',
							amount2: '4.1',
							amount3: 15
						}]
					}
				},
				methods: {
					mergeComon(id, rowIndex) { // 合并单元格
						let idName = this.tableData[rowIndex][id]
						if (rowIndex > 0) {
							// eslint-disable-next-line eqeqeq
							if (this.tableData[rowIndex][id] != this.tableData[rowIndex - 1][id]) {
								let i = rowIndex;
								let num = 0
								while (i < this.tableData.length) {
									if (this.tableData[i][id] === idName) {
										i++
										num++
									} else {
										i = this.tableData.length
									}
								}
								return {
									rowspan: num,
									colspan: 1
								}
							} else {
								return {
									rowspan: 0,
									colspan: 1
								}
							}
						} else {
							let i = rowIndex;
							let num = 0
							while (i < this.tableData.length) {
								if (this.tableData[i][id] === idName) {
									i++
									num++
								} else {
									i = this.tableData.length
								}
							}
							return {
								rowspan: num,
								colspan: 1
							}
						}
					},
					objectSpanMethod({
						row,
						column,
						rowIndex,
						columnIndex
					}) {
						if (columnIndex === 0) {
							return this.mergeComon('id', rowIndex)
						}

					}
				}
			})
		</script>