• Antd pro中ProFormSelect使用initialValues


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

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

    正常的解决思路如下:

    原代码代码如下:

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

    修改后代码如下:

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

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

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

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

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

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

    传的值parentId就会变为name,

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

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

    }else{

    }

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

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

  • 相关阅读:
    Promise的基本使用
    10个python爬虫入门实例
    英语六级day-1
    当鼠标移动到table的时候行列都有样式
    【BOOST C++ 16 语言扩展】(4) Boost.Conversion
    计算机基本工作原理
    Vue3 + Vite + Ts + Router搭建项目
    python常用库之数据库orm框架之SQLAlchemy
    08.25单元测试之pytest
    ELK创建仪表盘
  • 原文地址:https://blog.csdn.net/chhpearl/article/details/126134181