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
}
}
}
}