看文档:
1、先在标签内引入对应的函数:span-method="objectSpanMethod"
<el-table
style="margin-top: 20px"
:span-method="objectSpanMethod"
:data="info.points"
:height="500"
v-loading="dialoading"
:row-class-name="$tabRowClassName"
>
2、 写对应的合并单元格函数
踩坑啦,看文档的时候,else中的 rowspan,colspan,两个值都是0,但0会让其他单元格的值消失,所以要写成1
然后合并好几行单元格不能只写第一个的索引值,要用或运算符,三个都写上
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 2) {
if (rowIndex == 5 || rowIndex == 6 || rowIndex === 7) {
return {
rowspan: 3,
colspan: 1,
};
} else {
return {
rowspan: 1,
colspan: 1,
};
}
}
},
接下来,可以合并单元格内的数值,可以通过scope.$index获取当前项的索引,然后通过索引获取值去加减
当时不知道scope.$index可以获取当前项索引,所以合并值的时候,无从下手
<template slot-scope="scope">
<!-- {{scope.$index!=5?scope.row.t: }} -->
{{
scope.$index != 5
? scope.row.t
: info.points[scope.$index].t +
info.points[scope.$index + 1].t +
info.points[scope.$index + 2].t
}}
</template>