快捷導(dǎo)航

antd Select下拉菜單動態(tài)添加option里的內(nèi)容操作

更新時(shí)間：2020年11月02日 08:41:06 作者：Met_life

這篇文章主要介紹了antd Select下拉菜單動態(tài)添加option里的內(nèi)容操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

antd Select下拉菜單動態(tài)添加option里的內(nèi)容，通過form表單綁定select選中的值

提供一個(gè)公共的方法，每次只需去調(diào)用這個(gè)方法就行了

//這里是示例數(shù)據(jù)格式
let giftScope =[
 {
 code:200,
 id:1,
 name:"張三"
 }, {
 code:300,
 id:2,
 name:"李四"
 }, {
 code:400,
 id:3,
 name:"王五"
 }, {
 code:500,
 id:4,
 name:"趙六"
 },
]

// 提供了一個(gè)在select里面添加公用Option內(nèi)容的方法 
//第一個(gè)參數(shù)為原數(shù)據(jù)（array） 
//第二個(gè)為value----值為當(dāng)前輸入框內(nèi)容對應(yīng)的id或code唯一標(biāo)識(不能為number會報(bào)錯(cuò)) 
//第三個(gè)為內(nèi)容
 const renderOption = (arr , code , name) => arr ? arr.map( (item,index)=>{
 return (<Option key={index+item[code]} value={ typeof(item[code]) === 'number' ? item[code].toString() : item[code]}>{item[name]}</Option>)
 }) : null
 <Select mode="tags" >{renderOption(giftScope,'id','name')}</Select>

配合form表單使用

//parameter可以是id，也可以是code或者其他需要的字段，調(diào)用renderOption方法時(shí)更改第二個(gè)參數(shù)即可
//通過form表單API獲取到所有value值的parameter就為綁定的id或者code
   <Form.Item>
   {getFieldDecorator('parameter', {
    rules: [{ required: false, message: '請選擇' }],
     })(
    <Select mode="tags" >{renderOption(giftScope,'id','name')}</Select>,
    )}
   </Form.Item>

補(bǔ)充知識：關(guān)于antd Select選擇器

根據(jù)服務(wù)器端的值動態(tài)渲染 select的option值

在moddels里面直接處理數(shù)據(jù)

*getSiteOptionsAdmin({ payload }, { call, put }) {
   try {
    const { data } = yield call(notice.getSiteOptionsAdmin, payload);
    if (data.code === 200) {
     const menudata = [];
     menudata.push(<Select.Option key={0} value="0">全部</Select.Option>);
     for (let i = 0; i < data.info.length; i++) {
      menudata.push(
       <Select.Option
        key={data.info[i].id}
        value={data.info[i].id.toString()}
       >
        {data.info[i].title}
       </Select.Option>,
      );
     }
     yield put({ type: 'save', payload: { getSiteOptionsAdmin: menudata } });
    } else {
     message.error(data.message);
    }
   } catch (error) {
    console.log(error);
   }
  },

全部選項(xiàng)就是value值為0 的option值

export default connect((state) => {
 return {
  activityList: state.activity.activityList,
  menudata: state.notice.getSiteOptionsAdmin,
 };
})(Form.create()(QuestionList));

<Select 
showSearch 
placeholder="請選擇站點(diǎn)" 
style={{ width: '160px' }} 
optionFilterProp="children" 
onChange={this.handleChange}>
 <Option key={0} value={0}> 全部</Option>
 {this.props.menudata.length > 0 ? this.props.menudata : []}
</Select>,

以上這篇antd Select下拉菜單動態(tài)添加option里的內(nèi)容操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: