element-ui el-table合并单元格
合并单元格，如果id一样则合并
实现原理
getSpanArr(data)方法 data就是我们从后台拿到的数据，通常是一个数组；spanArr是一个空的数组，用于存放每一行记录的合并数；pos是spanArr的索引。如果是第一条记录（索引为０），向数组中加入１，并设置索引位置；如果不是第一条记录，则判断它与前一条记录是否相等，如果相等，则向spanArr中添入元素０，并将前一位元素＋１，表示合并行数＋１，以此往复，得到所有行的合并数，０即表示该行不显示。
export default {
data () {
return {
spanArr:[],
pos: 0
}
},
methods: {
getSpanArr(data) {
this.spanArr = []
this.pos = 0
for (let 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('194',this.spanArr)
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// row.channelInfoDtoList.length 这个值是通道的length，
// 就是需要合并的行数 合并行或列的计算方法。方法的参数是一个对象，里面包含
// 当前行row、
// 当前列column、
// 当前行号rowIndex、
// 当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
if (columnIndex === 1 || columnIndex === 2 || columnIndex === 7) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return { // [0,0] 表示这一行不显示， [2,1]表示行的合并数
rowspan: _row,
colspan: _col
}
}
},
}
}
