vue使用elementui合并单元格,并合并单元格中的值

看文档:

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>

 


版权声明:本文为weixin_46348229原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。