方案支持顏色自定義，高亮行數自定義，可高亮多行，可定義多個顏色，主要實現方式是css樣式，代碼簡單易懂，下面看效果和代碼吧：

當前效果：

預期效果：

代碼：這是HTML代碼 綁定這個屬性:row-class-name=“tableRowClassName”

```

<el-table

:data="tableData"

style="width: 100%"

:row-class-name="tableRowClassName">

<el-table-column

prop="date"

label="日期"

width="180">

</el-table-column>

<el-table-column

prop="name"

label="姓名"

width="180">

</el-table-column>

<el-table-column

prop="address"

label="地址">

</el-table-column>

</el-table>

```

這是JS代碼 注冊這個方法tableRowClassName()，這里傳的rowIndex就是需要高亮的數據在數組里面的下標，返回的class類名就是你自己定義的class類名。

```javascript

methods: {

tableRowClassName({row, rowIndex}) {

if (rowIndex === 1) {

return 'warning-row';

} else if (rowIndex === 3) {

return 'success-row';

}

return '';

}

},

格 Table 要展示統(tǒng)計行應該是個很常見的業(yè)務需求，本文將介紹一種實現此功能的方法。注意，此方法不兼容 IE 瀏覽器。

場景介紹

公司存量項目使用的 antd 版本為 3.x，此版本的 antd 并沒有支持統(tǒng)計行功能，只有一個 footer 屬性可以在表格底部增加一行內容，但是這個并不能滿足統(tǒng)計行的要求（無論是單元格對齊還是橫向滾動），所以需要想個其他方法去實現統(tǒng)計行。

同時對于公司內新項目來說，用的是 antd 5.x 的版本，此版本支持統(tǒng)計行功能，但是需要使用 Summary 組件去構造統(tǒng)計行，功能靈活但是使用上會麻煩些。

所以就思考有沒有能在不同 antd 版本下都實現統(tǒng)計行的技術方案，同時使用上又比較簡單。

實現方案

首先來分析下統(tǒng)計行的特點：

• 統(tǒng)計行是獨立的一行數據，會使當前頁的數據量 +1，如一頁 10 條數據的話，加上統(tǒng)計行則為 11 條。
• 通常表格豎向滾動時，統(tǒng)計行會固定在表格尾部。
• 樣式和交互需要和表格為一個整體，包括單元格、橫向滾動等等。

對于第一點，如果 antd 的 Table 組件設置了分頁功能，比如 pagination: { pageSize: 10 }，此時就無法展示額外的統(tǒng)計行，所以我們不使用 Table 的分頁功能，自己通過組合 Pagination 組件來實現分頁，數據傳參方面， Table 的 dataSource 除了當前頁數據，在拼上統(tǒng)計行數據即可。

第二點，固定在尾部，對于現代 css 來說，直接使用 position: sticky 實現即可。

第三點的話，在第一點提到的方案中已經實現。

整體來說，就是實現以下兩個功能點：

• 不使用 Table 內置的分頁，使用 Table 和 Pagination 組合來完成。
• 使用 position: sticky 完成固定行能力。

具體實現

在 antd Table API 基礎上，新增一個 summaryFixed API，代表統(tǒng)計行（即最后一行）固定在表格底部，默認為 false，不影響沒有統(tǒng)計行的列表展示。

首先我們實現下統(tǒng)計行固定功能。

import React from "react";
import classNames from "classnames";
import { Table as AntdTable } from "antd";
import "./table.css";

export default function Table({
  summaryFixed,
  ...restProp
}) {
  return (
    <div
      className={classNames("my-enhance-table", {
        "my-enhance-table-summary-fixed": summaryFixed,
      })}
    >
      <AntdTable {...restProp} />
    </div>
  );
}

代碼中使用到了 classnames 庫，在 summaryFixed 為 true 的時候，就會加上對應類名，接著就根據 my-enhance-table-summary-fixed 類名設置對應 css。

.my-enhance-table.my-enhance-table-summary-fixed {
  tr.ant-table-row:last-child {
    background: #fff;
    position: sticky; /* 設置為 sticky 布局 */
    bottom: 0;        /* 固定在底部 */
    z-index: 2;
    &:not(:first-child) > td {
      border-top: 1px solid #f0f0f0;
    }
  }
  tr.ant-table-row:nth-last-child(2) {
    > td {
      border-bottom: 0;
    }
  }
}

上述 css 中通過 tr.ant-table-row:last-child 選擇器選中最后一行并設置為 sticky 布局，其他 css 代碼是處理邊框問題的。

固定統(tǒng)計行功能實現完成后，接著通過組合 Table 和 Pagination 組件的方式實現統(tǒng)計行的展示。

import React, { useRef, useEffect } from "react";
import isEmpty from "lodash/isEmpty";
import classNames from "classnames";
import { Table as AntdTable, Pagination } from "antd";
import "./table.css";

export default function Table({
  dataSource,
  columns,
  pagination,
  onChange,
  summaryFixed,
  ...restProp
}) {
  const onTableChange = (pagination, filters, sorter, extra) => {
    // 處理排序和篩選之類功能
  };

  const onPaginationChange = (current, pageSize) => {
    // 處理翻頁功能
  };

  return (
    <div
      className={classNames("my-enhance-table", {
        "my-enhance-table-summary-fixed": summaryFixed,
      })}
    >
      <AntdTable
        {...restProp}
        pagination={false}
        dataSource={dataSource}
        columns={columns}
        onChange={onTableChange}
      />
      {pagination !== false && (
        <Pagination {...pagination} onChange={onPaginationChange} />
      )}
    </div>
  );
}

將 Table 的 pagination 設置為 false，并將外部的 pagination 參數傳給傳入到 Pagination 組件，我們就可以在 pageSize 為 10 的情況下，讓 dataSource 內容全部展示（即使 dataSource 的數據量超過 10）。

最后我們需要處理下翻頁和排序等相關操作：

...

const initPagination = { current: 1, pageSize: 10, total: 0 };

// 獲取 columns 中排序參數，區(qū)分首次和后續(xù)更新
const getSorterParam = (columns, isInit = false) => {
  const sorterParam = {};
  for (let index = 0; index < columns.length; index++) {
    const { sorter, defaultSortOrder, sortOrder, dataIndex, key } =
      columns[index] || {};
    const order = isInit
      ? sortOrder != null
        ? sortOrder
        : defaultSortOrder
      : sortOrder;
    if (sorter && order) {
      sorterParam.field = dataIndex || key;
      sorterParam.columnKey = dataIndex || key;
      sorterParam.order = order;
      sorterParam.column = columns[index];
      return sorterParam;
    }
  }
  return sorterParam;
};

export default function Table({
  dataSource,
  columns,
  pagination,
  onChange,
  summaryFixed,
  ...restProp
}) {
  const sorterParam = useRef(getSorterParam(columns, true));
  const filtersParam = useRef({});
  const paginationParam = useRef(pagination || initPagination);

  useEffect(() => {
    paginationParam.current = pagination || initPagination;
  }, [pagination]);

  useEffect(() => {
    // 排序可控模式下更新排序
    if (columns.some((col) => !!col.sortOrder)) {
      sorterParam.current = getSorterParam(columns);
    }
  }, [columns]);

  const onTableChange = (pagination, filters, sorter, extra) => {
    if (!isEmpty(sorter)) {
      sorterParam.current = sorter;
    }
    if (!isEmpty(filters)) {
      filtersParam.current = filters;
    }
    if (onChange) {
      onChange(
        isEmpty(pagination) ? paginationParam.current : pagination,
        filtersParam.current,
        sorterParam.current,
        extra
      );
    }
  };

  const onPaginationChange = (current, pageSize) => {
    paginationParam.current = { ...paginationParam.current, current, pageSize };
    pagination?.onChange?.(current, pageSize);
    onTableChange(paginationParam.current, undefined, undefined, {
      currentDataSource: dataSource,
      action: "paginate",
    });
  };
  
  return (
    ...
  )
}

無論是翻頁還是排序或篩選，我們都需要記錄下對應的值。因為翻頁功能是單獨的 Pagination 組件提供的，所以觸發(fā)翻頁時，我們需要用到之前的排序或篩選參數，通過 onChange 一起給到外部；觸發(fā)排序或篩選的情況同理，需要用到最近一次的翻頁參數。

最終完整代碼可查看：https://codesandbox.io/p/sandbox/antd-table-tong-ji-xing-gu-ding-grlz88?file=%2FTable.js%3A19%2C27

總結

通過組合 Pagination 組件來實現超過當前每頁條數的數據量展示，同時配合現代 css 的 position: sticky 能力，我們實現了讓 Table 表格支持統(tǒng)計行功能。當然，上述代碼有需要優(yōu)化的地方，比如翻頁后回到表格頂部等等。