ant design Pro Protable可编辑表格针对某行进行设置
作者:互联网
工作过程中因为被选型图坑了 在使用Protable过程中,有需要对某行或者某几行进行特殊化处理。网上好像暂时好像没找到对应方法,故记录一下。
因为Protable的formItemProps是对列进行设置的,所以想要针对某行需要使用到renderFormItem来修改。
以下是设置:
const columns: ProColumns<DataSourceType>[] = [
{
title: '序号',
dataIndex: 'index',
valueType: 'index',
width: 60,
},
{
title: '各项指标名称',
dataIndex: 'title',
width: '30%',
editable: (text, record, index) => {
return false;
},
},
{
title: '年初至本月底累计总额',
dataIndex: 'monthTotal',
width: '30%',
valueType: 'digit',
editable: (text, record, index) => {
return true;
},
renderFormItem: ({ index }) => {
return [12,13,11].includes(index) ?
<InputNumber placeholder="请输入非负的正整数" type="number" min={0} onKeyPress={handleKeyPress} />
:
<InputNumber type="number" precision={2} placeholder="保留小数点后两位" />
},
formItemProps: {
rules: [
{
required: true,
message: '此项是必填项'
}
],
},
},
{
title: '上年同期累计',
dataIndex: 'hisTotal',
width: '30%',
editable: (text, record, index) => {
return false;
},
},
];
主要的代码:
renderFormItem: ({ index }) => {
return [12,13,11].includes(index) ?
<InputNumber placeholder="请输入非负的正整数" type="number" min={0} onKeyPress={handleKeyPress} />
:
<InputNumber type="number" precision={2} placeholder="保留小数点后两位" />
},
这边是针对11.12.13行进行的特殊化处理,我这边是这几行要设置成正整数且不可为负,其他行只需要保留两位小数。
标签:index,return,title,Pro,编辑表格,ant,width,dataIndex,30% 来源: https://blog.csdn.net/qasw460326327/article/details/121160095