Ant Pro的组件ProTable安利

为何要使用

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

查询功能

经过 column 的配置自动生成的（第一张图红色区域），默认会把columns下的全部项都列为查询项目,配置request后，会自动处理查询数据，并请求接口。
markdown

1.request配置以下:antd

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

注：params中参数为:{current: 1,pageSzie: 20},根据业务接口须要，能够对params进行扩展便可。
app

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

{
	data: [],
    total: 100,
    pageSize: 20,
    current: 2,
}
复制代码

3.如不须要columns中的项出如今查询项中，只需在columns配置hideInSearch：true便可。ide

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

4.若是不须要查询功能，配置以下：工具

<ProTable
    search={false}
 />
复制代码

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

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

6.对查询项进行类型设置，可在columns配置valueType，如须要某个查询项以日期和时间形式展现：fetch

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

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

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组件，能够大大提升列表的开发效率。