Antd pro中ProFormSelect使用initialValues

最近使用antd pro写项目,其中有一个下拉框回显问题,原本挺简单的代码,但是就是回显对不上。

我给的值是id,想让其显示name,但是显示的确实id。。

正常的解决思路如下:

原代码代码如下:

          <ProFormSelect
            name="parentId"
            label="所属分类"
            initialValue={formType === FormType.add ? '' : currentRow?.parentId}
            valueEnum={classList}
            rules={[{ required: true, message: '分类组名为必填项' }]}
          />

修改后代码如下:

          <ProFormSelect
            name="parentId"
            label="所属分类"
            initialValue={formType === FormType.add ? '' : currentRow?.parentId + ""}
            valueEnum={classList}
            rules={[{ required: true, message: '分类组名为必填项' }]}
          />

原因:实际上 select 组件会自动将对应的 id 转为值展示。

就是id的值类型没有对上,parendId是number类型,但是在组件里的值是string类型的,所以在parentdId后面拼个空字符串,就好了!

-------------------------下面来个不正常的解决思路----------------------------------

我回显直接给name,这个时候你回显倒是能对上,切换下拉框选择再次点击确认,也没问题。

扫描二维码关注公众号,回复: 14910846 查看本文章

但是如果在编辑回显页面,不操作,直接点击确认,就会有问题。

传的值parentId就会变为name,

由于我知道id肯定是一串数字,而name基本上不会是一串纯数字。所以做了如下的判断,(当然是个不好的办法,但是也是一种临时解决问题的思路)

if (isNaN(Number(value.parentId, 10))) {

}else{

}

判断下值是不是纯数字,然后分为两种情况,分别处理也行。

一个问题的解决方法千万种,不行咱就换。

猜你喜欢

转载自blog.csdn.net/chhpearl/article/details/126134181