ProTable

表格配置项

Table 配置

属性	描述	类型	默认值
title	标题	string | () => string
url	接口请求地址	(values)=> values
columns	antd columns 标准配置	array
rowKey	唯一key值	string | (() => string)
tabs	tabs栏配置	tabs
formProps	搜索表单配置	formProps
tableTools	表格工具栏配置	tableTools
preSubmit	搜索前数据过滤,将过滤完成后的值return	(values)=> values
requestData	自定义请求数据	object
row	是否开启多选	boolean	false

formProps

属性	描述	类型	默认值
search	搜索框类型	searchType[]
config	表单其他项配置
layoutConfig	antd form 标准配置	form

searchType

搜索框配置 | 属性 |描述 |类型 | 默认值 | | :------- | -------- | --------- | -------- | |wrap |form.Item配置 |form.Item | | |props |input配置 |form.input.props | |

props 为注入到input框的配置，可根据不同input来配置不同配置项，都为antd input标准配置项 <Input allowClear {...props} /> 如为下拉选择框，则在props中配置 enum 属性

enumType

下拉选择项配置 | 属性 |描述 |类型 | 默认值 | | :------- | -------- | --------- | -------- | |label |option 标签的文本 |string | | |value |option 标签的值 |string | number | |

form.Item

该配置会注入至 <Form.Item {...item.wrap}> </Form.Item> | 属性 |描述 |类型 | 默认值 | | :------- | -------- | --------- | -------- | |name |传入后端的key |string |number | | |label |label 标签的文本 |string |number|| |type |搜索input类型 |'input' | 'select' | 'rangepicker' | 'timepicker '| 'input'| |col |响应式布局 antd col 标准配置 |col |{ xs:{24}, sm:{24}, xl:{8} }|

tabs

tabs配置 切换时默认会向后端发送请求 | 属性 |描述 |类型 | 默认值 | | :------- | -------- | --------- | -------- | |key |tabs的key |string |number | | |onChange |切换时的回调 |(key,value)=>void |(key,value)=>void | |defaultKey |默认选中key |string |number | | |data |tabs展示数据 |tabsDataType| | |title |标题，二级tabs需配置 |string| | |col |响应式布局，二级tabs可配置， antd col 标准配置 |col | { xs: 12, sm: 8, md: 8, lg: 6, xl: 3, xxl: 2 } | |defaultOpen|二级tabs是否默认展开，二级tabs可配置， |boolean| false |

tabsDataType

tabs展示数据 | 属性 |描述 |类型 | 默认值 | | :------- | -------- | --------- | -------- | |label |展示的文本 |string |number | | |key |展示文本的值 |string |number | |

---

Usage

import React, { memo } from 'react'

import ProTable from '@/components/pro-table'

// 表单配置
const formProps = {
    search: [

        {
            wrap: {
                key: 'product_name',
                name: 'product_name',
                label: '商品名称',
                type: 'input',
                col: {
                    xs: 24,
                    sm: 8,
                    xl: 6
                }
            },
            props: {
                placeholder: '请输入商品名称',
            }

        },

    ],
    config: {
        submit: {
            text: '查询'
        },
        reset: {
            text: '重置'
        }
    },
    layoutConfig: {

        layout: 'inline'
    }
}

/**
 * 过滤搜索值
 * @param {Object} values 
 */
const preSubmit = async (values) => {
    console.log('values', values);
    return Promise.resolve(values)
}

export default memo(function () {


    const tabs = {
        firstTabs: {
            key: 'channel',
            onChange: false,
            defaultKey: 1,
            data: [
                {
                    label: "全部",
                    key: 1,
                },
                {
                    label: "频道名称1",
                    key: 2,
                },
                {
                    label: "频道名称2",
                    key: 3,
                },
                {
                    label: "频道名称3",
                    key: 4,
                },
            ]
        },
        secondTabs: {
            key: 'category',
            onChange: false,
            title: '商品类目',
            defaultKey: 1,
            defaultOpen:true,
            col:{
            },
            data: [
                {
                    label: "全部",
                    key: 1,
                },
                {
                    label: "类目一",
                    key: 2,
                },
                {
                    label: "类目二",
                    key: 3,
                },
                {
                    label: "类目三",
                    key: 4,
                },
                {
                    label: "类目四",
                    key: 5,
                },
                {
                    label: "类目五",
                    key: 6,
                },
                {
                    label: "类目六",
                    key: 7,
                },
            ]
        }
    }


    // 表格行配置
    const columns = [
        {
            title: '商品 id',
            dataIndex: 'product_id',
            align: 'center'
        },
        {
            title: '商品名称',
            dataIndex: 'product_name',
            ellipsis: true,
            width: 300
        },
        {
            title: '商品价格',
            dataIndex: 'market_price',
        }

    ];


    return (
        <div>
            <ProTable url="product/list" title="京东商品" requestData={{ section_id: 1 }} tabs={tabs} formProps={formProps} columns={columns} rowKey="product_id" preSubmit={preSubmit} />
        </div>
    )
})

基础库更新日志

v1.1.8（2021-01-08）

• 更新 table渲染数据新增result字段支持
• 修复 自定义请求参数修改后，重新请求未带上自定义请求参数的的问题