如何在Ant Design的Table组件中让合并行背景色覆盖整个合并区域？

Question

目前效果如图，想要的效果合并两行，背景也想覆盖两行，图中红框部分都会有背景。

求问这个如何实现

想过利用rwospan去把对应数量行都添加背景，但是如果鼠标从rowspan为0的行，也就是图中白色部分，移入是获取不到合并行的。

antd的版本是"4.16.13"，链接中是antd的默认效果，

https://codesandbox.io/p/sandbox/biao-ge-xing-lie-he-bing-ant...

Answer 1

如果从非合并的单元格移入就是图中的效果，如果从合并的单元格移入就是链接中的默认效果，也就是说它是区分了情况，动态设置了样式；
至于如果鼠标从rowspan为0的行，也就是图中白色部分，移入是获取不到合并行的，是因为合并单元格都是由上而下,设置了rowspan为0，意味着这个单元格不会渲染，也就是说下面那一行少一个单元格，所以从白色部分移入时，自然获取不到合并行;

Answer 2

之前针对 element-ui 写过一个包装方法，可以参考一下。

/**
 * 给包含合并行的eltable增加斑马纹
 * 
 * @param {import('vue').Ref<InstanceType<import('element-ui').Table> | null>} tableRef 
 * @param {import('vue').Ref<Array<any> | null>} tableData 
 */
export function useStripeTable(tableRef, tableData) {
  /**
   * 将所有的行，按照跨行的列的行分组
   * 
   * @param {HTMLCollectionOf<HTMLTableRowElement>} _rows 
   * @param {number} columnCount 
   * @returns {Array<Array<HTMLTableRowElement>>}
   */
  function getGroupedRows(_rows, columnCount) {
    /** @type {Array<Array<HTMLTableRowElement>>} */
    const rows = [];
    Array.from(_rows).forEach(row => {
      if(row.children.length === columnCount) {
        rows.push([row]);
      } else {
        const lastRow = rows[rows.length - 1];
        if(lastRow) {
          lastRow.push(row);
        }
      }
    });

    return rows;
  }

  watch(tableData, (val) => {
    // 数据太多就不合并了
    if(!val || val.length > 100) {
      return;
    }

    nextTick(() => {
      if(!tableRef.value) return;

      /** 总列数 */
      const columnCount = Array.from(
        tableRef.value.$el.getElementsByTagName('thead').item(0)?.getElementsByTagName('th') || [],
      ).filter(el => el.className.indexOf('el-table_')>=0).length || 0;

      if(columnCount <= 0) return;

      /** 表格的数据行 */
      const rows = tableRef.value.$el.getElementsByTagName('tbody').item(0)?.getElementsByTagName('tr');

      if(!rows) return;
      
      // 移除所有行的 striped 类
      Array.from(rows).forEach(row => {
        row.classList.remove('el-table__row--striped');
      });

      const groupedRows = getGroupedRows(rows, columnCount);
      
      // 给行增加 striped 类
      groupedRows.forEach((rows, index) => {
        if (index % 2 === 1) {
          Array.from(rows).forEach(row => {
            row.classList.add('el-table__row--striped');
          });
        }
      });

      // 给 eltabl 增加 striped 类
      tableRef.value.$el.classList.add('el-table--striped');
    });
  }, {
    deep: true,
  });
}