antd的联级选择器异步调用编辑回显_antd Select下拉菜单动态添加option里的内容操作...

本文介绍了如何在Ant Design的Select组件中实现动态加载选项并进行编辑回显。通过提供一个公共方法`renderOption`,可以根据数据动态渲染Select的option。在表单中使用时,配合Form组件的`getFieldDecorator`进行数据绑定。此外,还展示了如何从服务器获取数据,并动态更新Select的选项。在获取到服务器返回的值后,将数据填充到Select的选项中,实现了根据服务器端值动态渲染的Select选择器。
摘要由CSDN通过智能技术生成

antd Select下拉菜单动态添加option里的内容,通过form表单绑定select选中的值

提供一个公共的方法,每次只需去调用这个方法就行了

//这里是示例数据格式

let giftScope =[

{

code:200,

id:1,

name:"张三"

}, {

code:300,

id:2,

name:"李四"

}, {

code:400,

id:3,

name:"王五"

}, {

code:500,

id:4,

name:"赵六"

},

]

// 提供了一个在select里面添加公用Option内容的方法

//第一个参数为原数据(array)

//第二个为value----值为当前输入框内容对应的id或code唯一标识(不能为number会报错)

//第三个为内容

const renderOption = (arr , code , name) => arr ? arr.map( (item,index)=>{

return ({item[name]})

}) : null

{renderOption(giftScope,'id','name')}

配合form表单使用

//parameter可以是id,也可以是code或者其他需要的字段,调用renderOpti

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值