Ant?Design?of?Vue?select框獲取key和name的問(wèn)題
更新時(shí)間：2022年06月01日 09:53:14 作者：浩先生呀
這篇文章主要介紹了Ant?Design?of?Vue?select框獲取key和name的問(wèn)題，具有很好的參考價(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)的問(wè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下載excel的實(shí)現(xiàn)代碼后臺(tái)用post方法
這篇文章主要介紹了vue下載excel的實(shí)現(xiàn)代碼,后臺(tái)用post方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
Vue3中解決組件間css層級(jí)問(wèn)題的最佳實(shí)踐
<Teleport> 是 Vue 3 中引入的一個(gè)內(nèi)置組件,用于將組件的內(nèi)容渲染到 DOM 中的指定位置,而不受組件層級(jí)結(jié)構(gòu)的限制,本文給大家介紹了Vue3使用Teleport解決組件間css層級(jí)問(wèn)題的最佳實(shí)踐,需要的朋友可以參考下2025-02-02
Vue結(jié)合ElementUI上傳Base64編碼后的圖片實(shí)例
這篇文章主要介紹了Vue結(jié)合ElementUI上傳Base64編碼后的圖片實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
淺談vue.js導(dǎo)入css庫(kù)(elementUi)的方法
下面小編就為大家分享一篇淺談vue.js導(dǎo)入css庫(kù)(elementUi)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了vue3的ref,reactive的使用和原理解析,分析了?reactive?的實(shí)現(xiàn)，以及?reactive?api?返回的?proxy?代理對(duì)象使用的?handlers?陷阱，并且對(duì)陷阱中我們最常用的?get?和?set?的源碼進(jìn)行分析，需要的朋友可以參考下2022-09-09
Vue.js結(jié)合SortableJS實(shí)現(xiàn)樹形數(shù)據(jù)拖拽
本文主要介紹了Vue.js結(jié)合SortableJS實(shí)現(xiàn)樹形數(shù)據(jù)拖拽，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要為大家介紹了Vue完整版和runtime版的區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
本文主要介紹了Vue中的性能優(yōu)化方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了Vue 的雙向綁定原理與用法,結(jié)合實(shí)例形式總結(jié)分析了Vue 的雙向綁定基本原理、功能、用法及注意事項(xiàng),需要的朋友可以參考下2020-05-05
vue router 通過(guò)路由來(lái)實(shí)現(xiàn)切換頭部標(biāo)題功能
在做單頁(yè)面應(yīng)用程序時(shí)，一般頁(yè)面布局頭尾兩塊都是固定在布局頁(yè)面，中間為是路由入口。這篇文章主要介紹了vue-router 通過(guò)路由來(lái)實(shí)現(xiàn)切換頭部標(biāo)題 ,需要的朋友可以參考下2019-04-04