Ant Design 两种方式实现 Table 的固定行 (一般用于显示合计数据)

eternallycyf

已于 2023-06-04 14:58:23 修改

阅读量1.8k

点赞数

文章标签：前端 reactjs react

于 2023-06-03 19:03:23 首次发布

本文链接：https://blog.csdn.net/weixin_44457030/article/details/131024460

版权

本文介绍了在Ant Design中实现Table固定行的两种策略：一是通过后端接口返回数据并利用Table.Summary；二是借助CSS的position: "sticky"属性。详细步骤包括接口调用、自定义渲染和CSS样式调整。

摘要由CSDN通过智能技术生成

github仓库地址

1.通过后端接口返回然后利用Table.Summary 实现
2.利用CSS position: “sticky” 实现

1. 通过后端接口返回然后利用Table.Summary 实现

一般是调用列表接口给后端多传一个isSummary之类的参数获取合计行(固定行) 数据 , 和列表结构一样
通过 columns.useSummary 自定义render 固定的渲染
可以自己优化下比如合计行(固定行) 顺序等等

import _ from 'lodash';
import {
    Table } from 'antd';

const columns = [
 {
   
   useSummary: (content, data) => '合计'
 }
]

const CommonTable = (props) => {
   
  const {
   
    columns = [],
    dataSource = [],
    fixRowDataSource = [],
    expandable,

    // 自定义的props
    // string[] 需要排除的列 固定行的某列直接显示 '--'
    removeSummary = [],
    // 'top' | 'bottom' 固定行位置 在顶部还是底部
    summaryPosition = 'top',
    ...restProps
  } = props;

  const renderSummary = () => {
   
    const newColumns = _.flattenDeep(columns)
    let defaultIndex = 0;
   if (expandable?.expandedRowRender ) {
   
      newColumns.unshift({
   });
      defaultIndex++;
    }
    if (expandable?.onExpand) {
   
      newColumns.unshift({
   });
      defaultIndex++;
    }

    const re