1.element官方文档
el-tabale使用方法 :span-method="arraySpanMethod"
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return [1, 2];
} else if (columnIndex === 1) {
return [0, 0];
}
}
}
return [1,2] 是指 [rowspan: 1,colspan: 2],这里的意思渲染到当前rowIndex,columnIndex的单元格时,返回的占用情况[1,1]表示1行1格,当前的值,[0,0]表示不占任何单元格,[1,2]则表示该数据占1行2格,所以是将当前columnIndex和columnIndex+1的单元格合并,并显示columnIndex的值
2.如何将连续的数据合并
我们可以将请求返回的数据,通过数据处理将每个单元格返回的rowspan和colspan计算好,放到参数,然后表格渲染的时候进行返回
indexList: [] //定义数组 //数据结构为{ rowIndex: undefined, columnIndex:undefined,spanDis: { rowspan: undefined, colspan: undefined } },
//返回数据处理逻辑代码
this.conditionList = response.rows
if (response.rows.length !== 0) {
let columns = this.$refs.table13.columns
//rowIndex 可以自己设置 我这里方便测试设置为3 表示从第四行数据计算,全部计算则算为0
for (let rowIndex = 3; rowIndex < this.conditionList.length; rowIndex++) {
//columnIndex 和上面同理
for (let columnIndex = 10; columnIndex < columns.length; columnIndex++) {
let data = _.find(this.indexList, { 'rowIndex': rowIndex, 'columnIndex': columnIndex })
if (data) {
continue
} else {
let colspan = 1
let property = columns[columnIndex].property
let item=this.conditionList[rowIndex]
let currentCellValue = item[property] //当前单元格的值
for (let index = columnIndex + 1; index < columns.length; index++) {
//判断单元格的值是否与后面的相同
let property = columns[index].property
let nextCellValue=item[property]
if (currentCellValue === nextCellValue) {
colspan++
}else {
//两个值不相同跳出循环
break
}
}
if(colspan>1){
for (let i = 0; i < colspan; i++) {
if (i === 0) {
this.indexList.push({
rowIndex: rowIndex,
columnIndex: columnIndex,
spanDis: { rowspan: 1, colspan: colspan }
})
} else {
this.indexList.push({
rowIndex: rowIndex,
columnIndex: columnIndex+i,
spanDis: { rowspan: 0, colspan: 0 }
})
}
}
}else {
this.indexList.push({
rowIndex: rowIndex,
columnIndex: columnIndex,
spanDis: { rowspan: 1, colspan: 1 }
})
}
}
}
}
}
3.在渲染时判断数据返回
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
let data = _.find(this.indexList, { 'rowIndex': rowIndex, 'columnIndex': columnIndex })
if(data){
return data.spanDis
}else {
return {rowspan: 1, colspan: 1}
}
}