项目场景:
vxe-table是一个很强大的js表格处理工具,详尽的文档让我在做项目时非常青睐于使用vxe-table。
需求:从第一个单元格开始,对整行的单元格进行合并,并把第一个单元格的内容进行居中显示。
问题描述
今天在使用vxe-table进行单元格合并时,出现了最后列为空白列的情况,且被合并的单元格的数据全部被挤压到了最后一个单元格的情况,如图。
这里我的需求是将整行的单元格进行合并,合并为一个单元格,使用span-method方法后出现前面内容被挤压的情况,其中span-method方法代码如下。
updateNewVersionDataColspan({ row,_rowIndex, _columnIndex,visibleData }) {
if (firstRow.f_status == "0" && firstRow.f_version != "######") {
if (_columnIndex == 0) {
return { rowspan: 1, colspan: 15};
}
}
},
原因分析:
由于只对第一个单元格进行合并,没对其它单元格进行设定合并,导致出现这种情况。
解决方案:
对其它单元格进行处理
updateNewVersionDataColspan({ row,_rowIndex, _columnIndex,visibleData }) {
if (firstRow.f_status == "0" && firstRow.f_version != "######") {
if (_columnIndex == 0) {
return { rowspan: 1, colspan: 15};
}
//这里将其它单元格进行隐藏
else{
return { rowspan: 1, colspan: 0 };
}
}
},
效果如下,其中最后一列被隐藏,实现了想要的效果。
如有其它方案,欢迎在下方讨论。