Ant Pro的组件ProTable安利

26,224 阅读4分钟

为什么要使用

ProTable 在 antd 的 table 上进行了一层封装,支持了一些预设,并且封装了一些行为,理论上你只要有配置列columns 和 request 属性,就可以生成一个全功能的表格,完成增删改查,分页查询,刷新,列属性修改等功能,可以大大提高表格的功能的开发效率。具体样式如下:(此处使用ProTable版本:2.4.2):

查询功能

通过 column 的配置自动生成的(第一张图红色区域),默认会把columns下的所有项都列为查询项目,配置request后,会自动处理查询数据,并请求接口。

1.request配置如下:

<ProTable
	headerTitle="查询表格"
	columns={columns}
   	request={(params) => queryTableData(params)}
 />

注:params中参数为:{current: 1,pageSzie: 20},根据业务接口需要,可以对params进行扩展即可。

2.queryTableData返回的数据格式应为:

{
	data: [],
    total: 100,
    pageSize: 20,
    current: 2,
}

3.如不需要columns中的项出现在查询项中,只需在columns配置hideInSearch:true即可。

const columns = [
       {
           title: '描述',
           dataIndex: 'desc',
           hideInSearch: true,
       }

4.如果不需要查询功能,配置如下:

<ProTable
    search={false}
 />

5.对search内容块修改为默认展开状态并去掉"收起"选项

<ProTable
    search={{
  	collapsed: false,
  	collapseRender:() => null
	}}
/>

6.对查询项进行类型设置,可在columns配置valueType,如需要某个查询项以日期和时间形式展示:

 const columns = [{      title: '上次调度时间',      dataIndex: 'updatedAt',      valueType: 'dateTime'      }]

注:valueType支持的类型有: 7.查询项为枚举值时,可在columns配置valueEnum,如:

 const columns = [{
      title: '状态',
      dataIndex: 'status',
      valueEnum: {
        0: {
          text: '关闭',
          status: 'Default',
        },
        1: {
          text: '运行中',
          status: 'Processing',
        },
        2: {
          text: '已上线',
          status: 'Success',
        },
        3: {
          text: '异常',
          status: 'Error',
        },
      },
    }]

8.valueType和valueEnum基本已经可以满足绝大部分需求了,如果对查询项还有别的需求,还可以通过renderFormItem自定义。

const columns = [{
	{
            title: 'ID',
            dataIndex: 'id',
            hideInTable: true,
            order: 3,
            renderFormItem: (item, { defaultRender, ...rest }, form) => {
                return (<Select
                    showSearch
                    placeholder="请选择"
                    style={{ minWidth: 200 }}
                    optionFilterProp="children"
                    virtual={false}
                    filterOption={(input, option) =>
                        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                >
                    {businessOptions.map(d => (
                        <Option value={d.id} key={d.id}>{d.name}</Option>
                    ))}
                </Select>)
            },
        },
}]

以上通过renderFormItem渲染出带搜索的下拉选择(valueEnum能实现下拉,但不支持搜索)。

表格的工具栏

1.toolBarRender 用来设置工具栏的按钮及其事件。
2.工具栏最右边的 4 个图标(密度, 全屏, 刷新, 列设置), 可以设置 table 的显示方式, 可以通过 options 来配置其是否显示。

表格内容

1.通过request,配置对应的ajax请求,即可获取到数据,方法见文章开头查询功能(request配置)。

2.actionRef,操作表单的预设方法,包括:刷新、重置所有项并刷新、重置到默认项、加载更多、清空选中项。

const actionRef = useRef();
// 刷新
actionRef.current.reload();
// 重置所有项并刷新
actionRef.current.reloadAndRest();
// 加载更多
actionRef.current.fetchMore();
// 重置到默认值
actionRef.current.reset();
// 清空选中项
current.clearSelected();
<ProTable
    search={{
  	collapsed: false,
  	collapseRender:() => null
    actionRef={actionRef}
	}}
/>

4.postData,对通过 url 获取的数据在渲染到表格前进行处理,比如筛选掉无效数据。

5.实现表格列内容超出隐藏,配置ellipsis进行自动缩略,但遗憾的时,并没有生效,属于bug。对比Table组件发现,在Table中配置ellipsis会自动将tableLayout设置为"fixed",但是在ProTable不会,因此需要手动给ProTable加上属性tableLayout="fixed",虽然功能实现了,但是展示会有问题,tips错位的问题。 注:以上问题改配置无法解决,而且在ProTable最新版(2.6.2)中这个问题依然存在,只好在columns通过render方法自己实现了,代码如下:

 const Ellipsis = (text) => {
        return (<Tooltip placement="topLeft" title={text}><span
            style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: '100%', display: 'inline-block' }}>
            {text}
        </span></Tooltip>)
    }
const columns = [
        {
            title: '名称',
            dataIndex: 'name',
            valueType: 'text',
            render: (text, record) => (
                <>
                    {Ellipsis(text)}
                </>
            ),
        }]

效果如下:

分页功能

默认带分页,如需要更改,可参考ant的Table组件API即可。

表单功能

ProTable还可以实现表单的功能,这是Table组件所不具备的,使用起来非常方便,可以实现表单项配置化。

const columns = [    {      title: '规则名称',      dataIndex: 'name',      rules: [        {          required: true,          message: '规则名称为必填项',        },      ],
      labelCol:{ span: 4},
      wrapperCol:{ span: 10 }
    }, 
    {
      title: '描述',
      dataIndex: 'desc',
      valueType: 'textarea',
      labelCol:{ span: 4 },
      wrapperCol:{ span: 10}
    }]
<div style={{width: 600}}>
    <ProTable
       onSubmit={async value => {
          console.log(value, 'value');
        }}
       type="form"
       columns={columns}
     />
 </div>

通过以上配置,便实现了表单的展示,校验,表单数据获取的功能,比直接使用表单Form组件要方便的多。

另外,还支持表单透传,如下:通过formItemProps配置表单disabled属性

const columns = [    {      title: '规则名称',      dataIndex: 'name',      rules: [        {          required: true,          message: '规则名称为必填项',        },      ],
      labelCol:{ span: 4},
      wrapperCol:{ span: 10 },
      formItemProps: {
        disabled: true,
        onChange: () => console.log('onChange'),
       
      },
    }, 
    {
      title: '描述',
      dataIndex: 'desc',
      valueType: 'textarea',
      labelCol:{ span: 4 },
      wrapperCol:{ span: 10}
    }]

总结

综合上述,ProTable确实是一个十分好用的table组件,可以大大提高列表的开发效率。