element表格中的合并行或列

最新推荐文章于 2024-09-26 17:58:41 发布

lf811

最新推荐文章于 2024-09-26 17:58:41 发布

阅读量5.7k

点赞数 5

分类专栏： element ui的使用文章标签： html 前端

本文链接：https://blog.csdn.net/lf811/article/details/127687799

版权

element ui的使用专栏收录该内容

8 篇文章 1 订阅

订阅专栏

说明

通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象。

官方代码可以看出, 如果想要合并当前指定的单元格需要指定合并的rowspan: 合并的行 colspan: 合并的列当直接设置为0的时候就不会显示
因此当指定不同的rowspan 和 colspan的时候就可以设定满足条件的合并单元格
而且 objectSpanMethod 方法是table在渲染每一行的时候就会触发
因此可以通过一个数组记录每行的合并状态

示例

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if(columnIndex === 0) {
if( rowIndex % 2 === 0 ) {
   return {
   rowspan: 2,
   colspan: 1
};
}
else {
return {
rowspan: 0,
colspan: 0
};
}
}
},

应用

1.通过数组记录每一行的状态

data() {
	return {
		id_array: [],
		id_pos: 0,
		tableData: []
	}
},
mounted() {
	this.id_init()
},
methods: {
	id_init() {
		this.id_array = []
		this.id_pos = 0
		for(let i = 0 ; i < this.tableData.length; i++) {
			// 如果当 i == 0 说明数据是第一行, 需要重新赋值
			if(i == 0) {
				// this.id_array.push(1) 说明这一行数据被显示出来
				this.id_array.push(1)
				// this.id_pos = 0 重置当前的计数器
				this.id_pos = 0
			}
			// 说明不是从第一行开始遍历的
			else {
				// 判断当前的指定数据是否和之前的指定数据值相同
				if(this.tableData[i].id == this.tableData[i-1].id) {
					// 如果相同就需要将 this.id_array 的数据自加
					this.id_array[this.id_pos] += 1
					// 同时需要将 this.id_array push一个0 表示下一行不用显示
					this.id_array.push(0)
				}
				// 说明 当前的数据和上一行的指定数据不同
				else {
					// this.id_array.push(1) 说明当前一行的数据需要显示
					this.id_array.push(1)
					// 重新给计数器赋值
					this.id_pos = i
				}
			}
		}
	},
	objectSpanMethod({ row, column, rowIndex, columnIndex }) {
		// 用于给第一列的table判断是否合并
	    if(columnIndex === 0) {
	    	// this.id_array[rowIndex] 取出当前存放行的合并状态
	        const _row = this.id_array[rowIndex] 
	        // 判断当前的 列是否需要显示
	        const _col = _row > 0 ? 1 : 0
	        return {
	        	rowspan: _row,
	        	colspan: _col
	        }
	    }
	}
}

2.分析