使用ProTable时，设置fiexd不起作用

直奔主题

背景

ProTable是ProComponents中的一个高级表格组件。

ProComponents 是基于 Ant Design 而开发的模板组件，提供了更高级别的抽象支持，开箱即用。可以显著的提升制作 CRUD 页面的效率，更加专注于页面。

ProTable 的诞生是为了解决项目中需要写很多 table 的样板代码的问题，所以在其中做了封装了很多常用的逻辑。这些封装可以简单的分类为预设行为与预设逻辑。

以上都是官网介绍，有兴趣去深入了解或者复习一下。

ProTable传送门

问题

使用ProTable组件构建复杂列表，为columns的最右侧列设置fiexd: 'right'，不起作用。

const columns: ProColumns<RoleType>[] = [
    {
      title: '角色编码',
      dataIndex: 'id',
      ellipsis: true,
      hideInSearch: true,
    },
    ...其他列配置,
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      hideInSearch: true,
      render: (_, record) => <a onClick={openDrawer(record)}>查看</a>
    }
]

<ProTable
    columns={columns}
    ...其他属性
/>

分析

• 配置错误？

  • 查询fixed的参数类型 export type FixedType = 'left' | 'right' | boolean;
  • 显然fixed: 'right'是符合要求的
  • pass

• 配置不全？

  • AntD中的Table配置columns的fixed是可以直接起到固定列的作用的 AntD - Table固定列传送门
  • 不过仔细查看columns找不同，发现固定的那一列和一些列配置了宽度
  • 难道在ProTable中宽度是必须设置的，否则fixed会不起作用？
  • 试一下，修改columns配置

  const columns: ProColumns<RoleType>[] = [
      {
        title: '角色编码',
        dataIndex: 'id',
        ellipsis: true,
        width: 100, // 这里增加了宽度
        hideInSearch: true,
      },
      ...其他列配置,
      {
        title: '操作',
        key: 'operation',
        fixed: 'right',
        width: 180, // 这里也增加了宽度
        hideInSearch: true,
        render: (_, record) => <a onClick={openDrawer(record)}>查看</a>
      }
  ]

  • 固定列不起作用
  • 那就把所有的columns都配置好宽度
  • 果然......，固定列依旧不起作用

• 需要额外的配置？

  • 查看ProTable的属性类型，看看是否有额外需要配置的属性

  declare const ProviderTableContainer: {
      <DataType extends Record<string, any>, Params extends ParamsType = ParamsType, ValueType = "text">(props: ProTableProps<DataType, Params, ValueType>): JSX.Element;
      Summary: typeof Summary;
  };

  • 找到ProTableProps，并没有看到fixed相关配置
  • 但是根据类型定义可以看出该类型属于交叉类型，其中还包含了TableProps

  export type ProTableProps<DataSource, U, ValueType = 'text'> = {
      ...一堆无关属性
  }  & Omit<TableProps<DataSource>, 'columns' | 'rowSelection'>;

  • 于是，顺着TableProps开始找，没有相关配置
  • TableProps继承自RcTableProps，继续找

  export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>,
      'transformColumns' | 'internalHooks' | 'internalRefs' | 'data' | 'columns' | 'scroll' | 'emptyText'> {
      ... 一堆无关属性
      }

  • 找到了，tableLayout属性看起来优先关联性

  export interface TableProps<RecordType = unknown> extends Omit<LegacyExpandableProps<RecordType>, 'showExpandColumn'> {
      tableLayout?: TableLayout;
      ...其他属性
  }

  • TableLayout类型定义export type TableLayout = 'auto' | 'fixed';
  • 为ProTable增加属性tableLayout='fixed'，起作用了
  • 但是这种滚动的方式很奇怪，好像整个页面的实际宽度被拉长了，并不是我们期望的列表滚动效果（请原谅我不能上图或者gif演示）
  • 要不调整一下列表的宽度，根据屏幕视口的变化动态调整
  • 调整后是可以了，但是还是无法跟AntD的Table那种固定列效果保持一致（调整过程不重要了，因为后面有正确的解决方案）

• 根据上面的分析推断，有没有可能是列表滚动宽度的问题？

  • 回到问题的起点，其实ProTable是对AntD - Table的封装
  • 所以我们可以从Table的属性入手，不局限于fixed，尝试使用其他的属性
  • 然后，就找到了scroll（需要从ProTableProps一级一级网上找，找到RCTableProps）

  scroll?: {
      x?: number | true | string;
      y?: number | string;
  };

  • 这个属性可以设置横向、纵向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比，true 和 'max-content'
  • 设置scroll: {width: true}不起作用
  • 改为scroll: {width: 1000}，成了，效果跟AntD - Table的固定列效果一致
  • 去掉tableLayout和columns的width，都不会影响固定列效果
  • 这......咬咬牙，默默告诉自己，学到了。

解决方案

为ProTable设置scroll: {width: 1000}，可根据自己的需求设定宽或者高，为了确保列表的内容正常展示，可以（非必须）为所有的columns指定宽度

总结

• 对于项目中使用的库，无论是UI库、工具库还是支持库，都要有足够的了解，优先级根据自身和项目的实际情况而定
• 如果不具备基础知识，很难独立进行问题的分析，而且每进行一步都会遇到一些自己不曾接触的知识点或未涉足的领域
• 要保持分析问题的热情，不断提升解决问题的能力
• 更全面的认知当下的任务的相关技术，不局限于自己使用的
• 业务很重要，因为api是死的，业务是活的，更复杂的需求才能催生更完善的api
• 加油！！！

PS：如果有需要补充的内容，请在评论区留言

转载时请注明"来自掘金 - EvenZhu"