el-table的表格合并

最新推荐文章于 2025-04-10 19:12:03 发布

奥特曼老师

最新推荐文章于 2025-04-10 19:12:03 发布

阅读量287

点赞数

分类专栏： vue-js HTML 文章标签： vue

本文链接：https://blog.youkuaiyun.com/Principal_Z/article/details/107659153

版权

HTML 同时被 2 个专栏收录

15 篇文章

订阅专栏

vue-js

7 篇文章

订阅专栏

本文介绍如何使用 Element UI 的 el-table 组件实现表格数据的行合并，通过 JavaScript 方法 abilitySpanMethod 控制单元格的合并，适用于展示具有层级结构的数据集。

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

表格样式在这里插入图片描述
话不多说，上代码

html部分
	<el-table
	:data="abilityTable"
	:span-method="abilitySpanMethod"
	style="width: 100%">
	<el-table-column
		prop=""
		label=""
		align="center">
	</el-table-column>
	<el-table-column
		prop=""
		align="center"
		label="">
	</el-table-column>
	<el-table-column
		prop=""
		align="center"
		label="">
	</el-table-column>
	<el-table-column
		prop=""
		align="center"
		label="">
	</el-table-column>
	<el-table-column
		prop=""
		align="center"
		label="">
	</el-table-column>
	<el-table-column
		prop=""
		align="center"
		label="">
	</el-table-column>
	<el-table-column
		prop=""
		align="center"
		label="">
	</el-table-column>
	<el-table-column
		prop=""
		align="center"
		label="">
	</el-table-column>
	<el-table-column
		prop=""
		align="center"
		label="">
	</el-table-column>
	<el-table-column
		prop=""
		align="center"
		label="">
	</el-table-column>
	<el-table-column
		prop=""
		align="center"
		label="">
	</el-table-column>
	<el-table-column
		align="center"
		label="">
		<el-table-column
			prop=""
			align="center"
			label="">
		</el-table-column>
		<el-table-column
		 	prop=""
	        align="center"
	        label="">
	 	</el-table-column>
	 </el-table-column>
</el-table>

js部分
	data() {
		abilityTable: []
	},
	mounted() {
		this.tableCombine()
	},
	methods: {
	    tableCombine() {
	      this.courseArr = []
	      this.coursePos = 0
	      for (let i = 0; i < this.abilityTable.length; i++) {
	        if ( i === 0 ) {
	          this.courseArr.push(1)
	          this.coursePos = 0
	        } else {
	           if (this.abilityTable[i].bureau === this.abilityTable[i - 1].bureau) {
	            this.courseArr[this.coursePos] += 1
	            this.courseArr.push(0)
	           } else {
	            this.courseArr.push(1)
	            this.coursePos = i
	           }
	        }
	      }
	    },
	    abilitySpanMethod({ rowIndex, columnIndex }) {
	   		console.log('rowIndex 代表表格 第几个行数')
	    	console.log('columnIndex 代表表格 第几个列数')
	      	if (columnIndex === 0 || columnIndex === 2 || columnIndex === 6 || columnIndex === 7) {
	        	return {
	        		rowspan: this.courseArr[rowIndex],
	          		colspan: this.courseArr[rowIndex] > 0 ? 1 : 0
	        	}
	      	}
		}
	}