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