ProTable—高级表单常用参数说明(目前我也在学习,有错误的欢迎在下方给我留言,我会及时修改。)

bordered: //是否展示外边框和列边框

columns: //表格每一列的配置描述

dataSource: //表格数据

dataIndex: //获取到的数组对应的参数名

search={{
searchText: '提交' ,

resetText: '重置'
}}

render: (text, record, index) => ${(params.current.pageNum - 1) * params.current.pageSize + (index + 1)} `

//从1开始的序列号

formItemProps: {

label: '下单时间', //修改显示的字段名

placeholder: '请输入用户ID/用户昵称/手机号/邀请人/邀请人手机号码', //修改显示的搜索框的提示

rules: [
{
required: true,
whitespace: true,
message: '此项是必填项'
},
{
message: '必须包含数字',
pattern: /[0-9]/
},
{
max: 16,
whitespace: true,
message: '最长为 16 位'
},
{
min: 6,
whitespace: true,
message: '最小为 6 位'
}
]

}

//自定义查询输入框

renderFormItem: (_, config, form) => {
return <Input placeholder="请输入标题" maxLength={30} allowClear />
}

valueType: //定义值的类型,会生成不同的渲染器

hideInSearch //在查询表单中不展示此项

request: //发送api请求,获取数据

dataSource 的方法params: //用于 request 查询的额外参数

postData: //对通过request 获取的数据进行处理

rowKey: //表格行 key 的取值,一般id

pagination: //去除分页

rowSelection={{
//表格行是否可选择selectedRowKeys,
//最后得到的被选中的表格数组
onChange: (keys, selectedRows) => { //选择表格的回调函数

setSelectedRowKeys(keys)
// 取决于你绑定的rowKey的值
setReceiveSelectedRowKeys(selectedRows) // 获取选择的数组 },

getCheckboxProps: (record) => ({

disabled: record.refundStatus !== 0 //禁用多选择框 })

}}

scroll = {{

//表格是否可滚动,也可以指定滚动区域的宽、高x: 1300,

// 滚动区域的宽度y:400 //滚动区域的高度}}

bordered: //是否展示外边框和列边框

columns: //表格每一列的配置描述

dataSource: //表格数据

dataIndex://获取到的数组对应的参数名

formItemProps: {

label: '下单时间', //修改显示的字段名

placeholder: '请输入用户ID/用户昵称/手机号/邀请人/邀请人手机号码'

//修改显示的搜索框的提示

}}

Last modification:October 19, 2022
如果觉得我的文章对你有用,请随意赞赏