element-plus表格合并最后一行并单独设置某一行样式

实现的效果：

主要用到的方法：

1. 合并行或列: span-method

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

2. 为某一行单独设置样式：row-class-name

可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class。

该方法的参数是一个对象，里面包含当前行 row和当前行号 rowIndex （从0开始，表头不算）。返回一个字符串，也就是类名。

全部代码：

<template>
  <div>
    <el-table
      :data="tableData"
      stripe
      border
      style="width: 100%"
      :header-cell-style="{ textAlign: 'center' }"
      :span-method="rowSpanMethod"
      :row-class-name="getRowClass">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
const tableData = [
  {
    name: 'Tom',
    date: '2016-05-03',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    name: 'Tom',
    date: '2016-05-02',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    name: 'Tom',
    date: '2016-05-04',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    name: 'Tom',
    date: '2016-05-01',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '最后一行自定义',
  },
];

// 合并表格最后一行单元格
const rowSpanMethod = ({ rowIndex }) => {
  if (rowIndex === tableData.length - 1) {
    return {
      rowspan: 1, // 合并几行
      colspan: 3, // 合并几列
    };
  }
};

// 单独设置一行的样式：rowIndex从0开始，表头不算
const getRowClass = ({ rowIndex }) => {
  return rowIndex === 4 ? 'row-right' : '';
};
</script>

<style>
.row-right {
  .cell {
    text-align: right;
  }
}
</style>

注意点：

1. 给row-class-name设置的样式不能写在scoped中
2. 合并单元格后不要直接给那一行设置样式，要给那一个单元格设置，否则单独设置行的样式无效