tr合并单元格显示数据html,elementUI el-table合并单元格-行合并(简单数组)

合并单元格,如果id列值一致,则合并

原理

1、getSpanArr(data)方法 data就是我们从后台拿到的数据,通常是一个数组;

2、spanArr是一个空的数组,用于存放每一行记录的合并数;

3、 pos是spanArr的索引。

如果是第一条记录(索引为0),向数组中加入1,并设置索引位置;

如果不是第一条记录,则判断它与前一条记录是否相等,

如果相等,则向spanArr中添入元素0,并将前一位元素+1,表示合并行数+1,

以此往复,得到所有行的合并数,0即表示该行不显示

export default {

data() {

return {

spanArr: [],//用于存放每一行记录的合并数

tableData6: [

{

id: “1”,

name: “王小虎”,

amount1: “234”

},

{

id: “1”,

name: “王小虎”,

amount1: “165”

},

{

id: “2”,

name: “王小虎”,

amount1: “324”

},

{

id: “2”,

name: “王小虎”,

amount1: “621”

},

{

id: “2”,

name: “王小虎”,

amount1: “539”

}

]

};

},

mounted: function() {

this.getSpanArr(this.tableData6);

},

methods: {

getSpanArr(data) {

// data就是我们从后台拿到的数据

for (var i = 0; i < data.length; i++) {

if (i === 0) {

this.spanArr.push(1);

this.pos = 0;

} else {

// 判断当前元素与上一个元素是否相同

if (data[i].id === data[i – 1].id) {

this.spanArr[this.pos] += 1;

this.spanArr.push(0);

} else {

this.spanArr.push(1);

this.pos = i;

}

}

console.log(this.spanArr);

}

},

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

if (columnIndex === 0 || columnIndex === 1) {

const _row = this.spanArr[rowIndex];

const _col = _row > 0 ? 1 : 0;

console.log(`rowspan:${_row} colspan:${_col}`);

return {

// [0,0] 表示这一行不显示, [2,1]表示行的合并数

rowspan: _row,

colspan: _col

};

}

}

}

};

最终显示效果

《tr合并单元格显示数据html,elementUI el-table合并单元格-行合并(简单数组)》

image.png

    原文作者:weixin_39562185
    原文地址: https://blog.csdn.net/weixin_39562185/article/details/117844554
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞