Ant?Design?of?Vue?select框獲取key和name的問題
更新時(shí)間：2022年06月01日 09:53:14 作者：浩先生呀
這篇文章主要介紹了Ant?Design?of?Vue?select框獲取key和name的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Ant Design of Vue select框獲取key和name
加入label-in-value這個(gè)屬性
<a-form-item label="分類">
? <a-select
? ? placeholder="請(qǐng)選擇分類"
? ? style="width: 100%"
? ? label-in-value
? ? v-decorator="['knowledgeunit', { rules: [{ required: true, message: '請(qǐng)選擇分類' }] }]"
? >
? ? <a-select-option v-for="(calssitem, index) in classflyData" :key="index" :value="calssitem.Code">
? ? ? {{ calssitem.Name }}
? ? </a-select-option>
? </a-select>
</a-form-item>獲取到的value 就會(huì)變成 {key: 1, lable: '名字'} 的形式
獲取值的時(shí)候可以這樣獲取
this.addResourceForm.validateFields((err, values) => {
? ?if (err && this.newChange.length > 0) {
? ? ?return
? ?}
? ?const saveObj = {}
? ?saveObj.knowledgeunit = values.knowledgeunit.key // 獲取的值
? ?saveObj.source = values.knowledgeunit.label ?// 獲取的名稱
?})我的記錄
還有一種方法
你如果想獲取怎個(gè)對(duì)象，怎么獲取呢？
<a-form-item label="分類">
? <a-select
? ? placeholder="請(qǐng)選擇分類"
? ? style="width: 100%"
?? ?@change="onChange"
? ? v-decorator="['knowledgeunit', { rules: [{ required: true, message: '請(qǐng)選擇分類' }] }]"
? >
? ? <a-select-option v-for="(calssitem, index) in classflyData" :key="index" :value="calssitem.Code">
? ? ? {{ calssitem.Name }}
? ? </a-select-option>
? </a-select>
</a-form-item>加一個(gè)onChange方法，根據(jù)下標(biāo)獲取對(duì)應(yīng)的對(duì)象
?onChange (item) {
? ?const obj = this.list[item]
? ?console.log(obj)
?}Ant Design Vue使用select出現(xiàn)的問題
1.select下拉菜單滾動(dòng)條滾動(dòng)后,自動(dòng)彈回到頂部
解決方法：
a-select-option 使用v-for渲染時(shí)，key值不能重復(fù)或者為null
2.下拉列表在局部滾動(dòng)時(shí)不跟隨,與select框分離
解決方法：
<a-select
:getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode || document.body;}"?
>以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了vue的Des加密解密使用實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
axios解決高并發(fā)的方法:axios.all()與axios.spread()的操作
這篇文章主要介紹了axios解決高并發(fā)的方法:axios.all()與axios.spread()的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
詳解10分鐘學(xué)會(huì)vue滾動(dòng)行為
本篇文章主要介紹了vue滾動(dòng)行為，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
vant中field組件label屬性兩端對(duì)齊問題及解決
這篇文章主要介紹了vant中field組件label屬性兩端對(duì)齊問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
基于Vue3+TypeScript的全局對(duì)象的注入和使用詳解
這篇文章主要介紹了基于Vue3+TypeScript的全局對(duì)象的注入和使用,本篇隨筆主要介紹一下基于Vue3+TypeScript的全局對(duì)象的注入和使用，需要的朋友可以參考下2022-09-09
avue實(shí)現(xiàn)自定義搜索欄及清空搜索事件的實(shí)踐
本文主要介紹了avue實(shí)現(xiàn)自定義搜索欄及清空搜索事件的實(shí)踐，主要包括對(duì)搜索欄進(jìn)行自定義，并通過按鈕實(shí)現(xiàn)折疊搜索欄效果，具有一定的參考價(jià)值，感興趣的可以了解一下2021-12-12
作為一個(gè)vue初學(xué)者不得不了解的就是組件間的數(shù)據(jù)通信(暫且不談vuex),通信方式根據(jù)組件之間的關(guān)系有不同之處,這篇文章主要給大家介紹了關(guān)于vue組件間通信的相關(guān)資料,需要的朋友可以參考下2021-07-07
這篇文章主要為大家詳細(xì)介紹了vue+antd實(shí)現(xiàn)折疊與展開組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
本篇文章主要介紹了深入理解vue Render函數(shù)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
Vue.js 是一套構(gòu)建用戶界面的框架，**只關(guān)注視圖層**，它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。這篇文章主要介紹了vue 的基本語法和常用指令,需要的朋友可以參考下2019-07-07