antd Select下拉菜單動態(tài)添加option里的內(nèi)容操作
antd Select下拉菜單動態(tài)添加option里的內(nèi)容,通過form表單綁定select選中的值
提供一個公共的方法,每次只需去調(diào)用這個方法就行了
//這里是示例數(shù)據(jù)格式
let giftScope =[
{
code:200,
id:1,
name:"張三"
}, {
code:300,
id:2,
name:"李四"
}, {
code:400,
id:3,
name:"王五"
}, {
code:500,
id:4,
name:"趙六"
},
]
// 提供了一個在select里面添加公用Option內(nèi)容的方法
//第一個參數(shù)為原數(shù)據(jù)(array)
//第二個為value----值為當前輸入框內(nèi)容對應(yīng)的id或code唯一標識(不能為number會報錯)
//第三個為內(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ù)即可
//通過form表單API獲取到所有value值的parameter就為綁定的id或者code
<Form.Item>
{getFieldDecorator('parameter', {
rules: [{ required: false, message: '請選擇' }],
})(
<Select mode="tags" >{renderOption(giftScope,'id','name')}</Select>,
)}
</Form.Item>
補充知識:關(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);
}
},
全部選項就是value值為0 的option值
export default connect((state) => {
return {
activityList: state.activity.activityList,
menudata: state.notice.getSiteOptionsAdmin,
};
})(Form.create()(QuestionList));
<Select
showSearch
placeholder="請選擇站點"
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)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue在自定義組件中使用v-model進行數(shù)據(jù)綁定的方法
這篇文章主要介紹了vue在自定義組件中使用v-model進行數(shù)據(jù)綁定的方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
關(guān)于SpringBoot與Vue交互跨域問題解決方案
最近在利用springboot+vue整合開發(fā)一個前后端分離的個人博客網(wǎng)站,所以這一篇總結(jié)一下在開發(fā)中遇到的一個問題,關(guān)于解決在使用vue和springboot在開發(fā)前后端分離的項目時,如何解決跨域問題。在這里分別分享兩種方法,分別在前端vue中解決和在后臺springboot中解決。2021-10-10
VueQuillEditor富文本上傳圖片(非base64)
這篇文章主要介紹了VueQuillEditor富文本上傳圖片(非base64),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
使用Vue.observable()進行狀態(tài)管理的實例代碼詳解
這篇文章主要介紹了使用Vue.observable()進行狀態(tài)管理的實例代碼,本文通過代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05

