element自带的方法不能够随机分,只能是固定的去合并,这里我的需求是根据图片的id去合并,一张图片可能对应多个题型
获取到的数据同时赋给tableData和spanArr,并在获取到数组的函数里执行getSpanArr方法,相当于给table赋值的还是用tableData 但是切割table是用的spanArr方法。
getSpanArr (data) {
this.spanArr = [] // 定义在vue的data中
if (data === null) {
return
}
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1)
this.pos = 0
} else {
if (data[i].pictureId === data[i - 1].pictureId) { // 我这里是根据图片去合并列,一张图片可能会对应多个题
this.spanArr[this.pos] += 1
this.spanArr.push(0)
} else {
this.spanArr.push(1)
this.pos = i
}
}
}
},
arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 1 || columnIndex === 0) { // 第一行和第二行进行合并
const _row = this.spanArr[rowIndex] // 从处理完的数组里获取
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col // 相当于给给表格加上rowspan,colspan属性
}
}
},
以上是合并一种,当要动态合并不同列的时候,再新增一个数组。getSpanArr的时候多套一层if,arraySpanMethod函数里去用
arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
// 每次走到第3列时给单元格加上rowspan和colspan属性
const _row = this.spanArr[rowIndex] // 从处理完的数组里获取
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col // 相当于给给表格加上rowspan,colspan属性
}
} else if (columnIndex === 1) {
const _row = this.contentSpanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
},
getSpanArr (data) {
this.spanArr = [] // 定义在vue的data中
this.contentSpanArr = []
if (data === null) {
return
}
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1)
this.pos = 0
this.contentSpanArr.push(1)
this.position = 0
} else {
if (data[i].differentia === data[i - 1].differentia) {
this.spanArr[this.pos] += 1
this.spanArr.push(0)
} else {
this.spanArr.push(1)
this.pos = i
}
if (data[i].classifyName === data[i - 1].classifyName) {
this.contentSpanArr[this.position] += 1
this.contentSpanArr.push(0)
} else {
this.contentSpanArr.push(1)
this.position = i
}
}
}
}