Ant Design Pro使用之--ProTable踩坑小计及样式调整碎碎念

Ara_tsubomi

已于 2022-10-24 16:50:46 修改

阅读量1.1w

点赞数 27

文章标签：前端 1024程序员节 react

于 2022-10-24 16:38:32 首次发布

本文链接：https://blog.csdn.net/weixin_62192841/article/details/127443186

版权

前言：碎碎念

由于近期才接触到Ant Design Pro脚手架（以下简称antd pro），并且是第一次使用ProComponents的一些组件，对于自己碰到的一些小坑及样式修改比较耗费时间的地方，进行了记录。本文先说ProTable - 高级表格组件。如果你也对于ProTable 有在苦恼的问题的话，就请看下去吧。

注：使用的脚手架版本是@ant-design/pro-cli ：umi@3 + simple + TypeScript。

对于中后台项目，首当其冲用到最多的就是表格了。不得不说，antd pro的表格组件是真的好用，不用自己写查询表单，不需要各个组件来回传值，麻烦且耗时。ProTable组件都给封装好了，查询表单、以及一般情况下会用到的筛选及排序功能，都给做好了，只需要进行配置就可以了。一个组件，百来行代码，就可以搞定一个很完美的表格页面。但是封装的功能越多，层级越深，就会发现配置的时候越不容易找到。(T_T)

Columns配置

先说Columns的一些常用配置吧：

属性	描述	用法或例子
valueEnum	值的枚举；对于一些行状态（如：是否启用，后端返回true或false，或数字时）或者无法返回直接展示在表格中的内容，可以使用值的枚举，并且可以配合status字段展示更明显的状态。	valueEnum: { 0: { text: '正常', status: 'Processing'}, 1: { text: '下线', status: 'Default' }, 2: { text: '拉黑', status: 'Error' }, } 注：这里Processing首字母需要大写哦。
request	从服务器请求枚举	`request` 是一个 promise,需要返回一个与 options 相同的数据
valueType	上方查询表单可以根据 `valueType` 来生成不同的表单类型；包括很多种，就不一一列举了，还可以自定义，可以查看官网通用配置	valueType: 'index', 序列号； valueType: 'indexBorder', 圆圈圈序列号； valueType: 'select', 下拉框； valueType: 'date', 日期选择框...
renderFormItem	渲染查询表单的输入组件；当valueType支持的表单类型不能满足需要时，可以通过renderFormItem自定义需要渲染的表单项及值	renderFormItem: () => { return <Cascader name="address" />; },
fieldProps	查询表单的 props，会透传给表单项，支持表单项（ant design中）的所有props。（这个配置项里可以写传给渲染的组件的 props，几乎所有的pro组件中都可以用这个配置来写antd对应组件中的配置）	例：查询表单input本身默认的占位字为“请输入”，如果想改的话，可以在columns的配置中： fieldProps: { placeholder: '请输入名称', },
key	在table中显示的字段和搜索的字段不同时，可以将key设置为搜索的字段	{ title: "始发地址", dataIndex: 'address', key: 'startAddr', }
renderText	类似 table 的 render，但是必须返回 string，如果只是简单地转化枚举，可以使用上面的 valueEnum，如果后端返回的数据需要复杂处理，也可以和valueEnum一起使用	例：此列的展示依赖到两个字段，需要复杂判断，可以先用renderText返回，再用valueEnum进行映射显示内容； renderText: (_, record) =>record.routeDetail.serviceType, valueEnum: { 1: { text: '专车' }, 2: { text: '班车' }, 3: { text: '拼车' }, 4: { text: '回程空仓' }, }
render	类似 table 的 render，第一个参数变成了 dom,增加了第四个参数 action；和renderText最大的区别除了参数text是个dom，就是renderText需要返回一个字符串string类型，而render支持返回一个ReactNode 或 ReactNode[ ]（操作列的各种操作按钮一般就用render来返回一个数组）	(text: ReactNode,record: T,index: number,action: UseFetchDataAction<T>) => ReactNode \| ReactNode[] render: (_, records) => [ <Link key="edit" to={ '/route/edit/id' }> 编辑</Link>, <a key="del" >删除</a> ],
hideInSearch	在查询表单中不展示此项	hideInSearch: true,
hideInTable	在表格中不展示此列	hideInTable: true,
filters	当值为true时，会自动根据此项的 valueEnum生成下拉筛选菜单	filters: true,
onFilter	如果需要网络筛选，需要关闭本地筛选才可以	onFilter: false,
sorter	排序：如果要前端做排序，则在这里直接写排序规则；如果要后端排序，则在这里开启即可，然后在ProTable的request中可以接收到对应属性	前端排序： sorter: (a, b) => a. time - b.time，后端排序： sorter：true，
width	限定列宽，值可以是number（单位是px）；可以是string（用来写百分比宽）	width: '10%', width: 143,
ellipsis	是否自动缩略，显示...	ellipsis: true,

ProTable的配置

另外就是ProTable的一些配置了：

request：request算是 ProTable 最重要的 API了吧，可以在request中发异步请求获取表格数据。有三个参数：params（是参数 params 查询表单和 params 参数的结合），sort（如果有在columns中开启后端排序的，则会接收到参数），filter（如果功能中有筛选的话，包含了设置filter为true的参数及值）。对于数据返回格式有要求：需要返回一个对象，对象中必须要有 data 和 success，如果需要手动分页 total 也是必需的。
rowKey：一定要写的属性（不写会报错），可以直接写字符串rowKey="id"，这里的“id”就是request中返回数据的唯一值。
options：表格右上角的工具栏菜单配置，就是那一堆刷新密度啥的，默认是都会显示的，如果不想让其中一个展示则把那一项改成false：options={{ reload: false }}；如果都不想让显示的话，直接设为false即可：options={false}。
toolBarRender：表格右上角的设置，可以使用toolBarRender来自定义，在options左边设置想要展示的“新增”按钮等，具体写法可参考官网。

search：可以传布尔值来控制是否显示搜索表单，传入对象时为搜索表单的配置，具体搜索表单的配置官网有写，下面列举几个我用到的：

search={{
   labelWidth: 90, /*标签的宽度，默认为80*/
   span: 10,  /*配置查询表单的列数：如果想两列展示的话，数值就需要9或10即可（>8即可）*/
   collapsed: false,  /*是否收起：false为不收起*/
   collapseRender: () => null,  /*收起按钮的 render：按钮都显示出来，没有收起展开*/
   optionRender: (searchConfig, formProps, dom) => [...dom],  /*自定义操作栏*/
}}

pagination：如果想自定义分页器，可以直接在这个属性中写个对象设置相关属性即可：

pagination={{
    pageSize: 10, /*每页条数：如果不配置的话，默认是每页20条显示*/
    current: 1,
    showTotal: (total) => `共${total}条`, /*总条数的展示*/
}}

关于样式调整

如果你有仔细看了上面的配置，就会发现有些已经可能用不到的样式被替换掉或者隐藏了，比如：

搜索表单中的展开和收起，通过search配置的collapsed属性，已经删掉了；
搜索表单的表单项展示列数，通过search配置的span可以控制，如果想要移动搜索和重置按钮位置，可以通过找到对应的类名，对这两个按钮进行定位（不过需要耐心找类名，我找了大半天才找到让两个按钮定位生效的类名）；
表格列宽通过columns中的width控制、列宽不够时是否显示省略号通过ellipsis控制；
分页器的显示，通过给ProTable配置pagination属性，即可以自定义分页器。

......其他的暂时想不起来了，等想起来了再补充吧。

以上都是我初次使用ProTable中遇到的问题和相关配置，如果有不对的地方或者对于业务处理有更好的方式的话，也请不吝赐教，谢谢！