element-ui表格的合并单元格（合并行合并列

最新推荐文章于 2025-09-24 13:22:45 发布

原创最新推荐文章于 2025-09-24 13:22:45 发布 · 559 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

该代码段展示了如何在JavaScript中检查columnIndex，对0、3、4列的第一行进行跨行合并。当columnIndex匹配时，如果rowIndex为0，则设置rowspan为3，否则不显示单元格。其他行和列则保持默认的单行单列显示。

ui图：在这里插入图片描述
js代码：合并行先判断columnIndex，合并列先判断rouIndex。

resetGoodsTable({ row, column, rowIndex, columnIndex }){

	先判断列， 0、3、4列的第一行做跨行合并单元格
	if(columnIndex === 0 || columnIndex === 3 || columnIndex === 4){
		判断第一行
		if(rowIndex === 0){
			rowIndex===0 时，合并单元格。
			return {
				rowspan: 3, 合并3行
                colspan: 1  1为显示
            }
        }else{
        	rowIndex != 0 时，单元格不显示，所以设置为0
            return {
            	rowspan: 0,
                colspan: 0
            }
        }
	}else{
		除0、3、4行之外的行
    	return {
    		rowspan: 1,
    		colspan: 1
		}
    }
}