图文解析注释el-table中自定义合并单元格的方法 :span-method

通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。 这是官方文档的解释

让我们看看实际开发的效果图（代码在最下面）

  <el-table
                class="table ux-dark-el-table"
                :header-cell-style="{ background: '#F2F2F2' }"
                :data="tableData"
                element-loading-spinner="el-icon-loading"
                :cell-class-name="setClass"
                :span-method="objectSpanMethod"
                >
                  <el-table-column width="150" label='维度' >
                    <template slot-scope="scope">
                        <div >{{ scope.row.name }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label='明细' >
                    <template slot-scope="scope">
                        <detailsText  :detail="scope.row.detail"/>
                    </template>
                     <!-- <div style="white-space: pre-wrap">{{ scope.row.detail }}</div> -->
                  </el-table-column>
                  <el-table-column label='所有数据' width="220">
                    <template slot-scope="scope">
                     {{ scope.row.name1 }}
                    </template>
                  </el-table-column>
                  <el-table-column label='合规数据' width="220">
                    <template slot-scope="scope">
                     {{ scope.row.name2 }}
                    </template>
                  </el-table-column>
                  <el-table-column label='异常数据' width="220" prop="name3">
                    <template slot="header">
                      <span>异常数据</span>
                      <el-popover
                        placement="top"
                        trigger="hover"
                        content="异常数据=所有数据-合规数据"
                      >
                        <i
                        slot="reference"
                          class="el-icon-warning-outline t-color-a7"
                        ></i>
                      </el-popover>
                    </template>
                    <template slot-scope="scope">
                     <span v-if="scope.row.name3 ===0 " > {{ scope.row.name3 }} </span>
                     <span class="red" v-else @click="handleDetail(scope.row)">{{ scope.row.name3 }}</span>
                    </template>
                  </el-table-column>
        </el-table>

 objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      // rowIndex 当前行号，columnIndex 当前列号。
      // rowspan 属性指定了一个单元格应该跨过的行数。例如，如果一个单元格的 rowspan 设置为 2，那么这个单元格就会占据它所在行以及接下来的一行
      // 使得这两行在该列中只有一个单元格显示内容，而不是两个。
      // colspan 属性则表示单元格应该跨过的列数。如果一个单元格的 colspan 设置为 2，那么这个单元格就会横跨它所在列以及右边的一列，合并为一个宽的单元格。
      if (columnIndex === 0) { // 单独处理第一列
        if (rowIndex === 0 || rowIndex === 10) {
          return { rowspan: 1, colspan: 1 }
        }
        if (rowIndex === 1) { // 如果到了第二行，则将第二行、第三行和第四行合并 所以rowspan: 3 因为只合并一个格子。所以colspan = 1
          return { rowspan: 3, colspan: 1 }
        } else if (rowIndex === 4) { // 如果到了第四行，则将第四行、第五行合并 所以rowspan: 2
          return { rowspan: 2, colspan: 1 }
        } else if (rowIndex === 6) {
          return { rowspan: 2, colspan: 1 }
        } else if (rowIndex === 8) {
          return { rowspan: 2, colspan: 1 }
        }
        return { rowspan: 0, colspan: 0 } // 其他行默认不合并
      }
      return { rowspan: 1, colspan: 1 }
    }