Ant Design of Vue select框獲取key和name的問題

Posted on by

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方法，根據下標獲取對應的對象

 onChange (item) {
   const obj = this.list[item]
   console.log(obj)
 }

Ant Design Vue使用select出現的問題

1.select下拉菜單滾動條滾動後,自動彈回到頂部

解決方法：

a-select-option 使用v-for渲染時，key值不能重復或者為null

2.下拉列表在局部滾動時不跟隨,與select框分離

解決方法：

<a-select
:getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode || document.body;}" 
>

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：