其他分享
首页 > 其他分享> > ant design Pro Protable可编辑表格针对某行进行设置

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