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/用户昵称/手机号/邀请人/邀请人手机号码'
//修改显示的搜索框的提示
}}
One comment
感谢分享,赞一个