ant design + vue 获取下拉菜单选中的option对象或者option的指定属性值；antdesign；select

原创已于 2024-11-06 10:58:27 修改 · 3.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ant design #下拉菜单获取option值 #change #code

于 2022-11-09 14:49:55 首次发布

本文展示了Vue中如何使用<a-select>组件进行数据绑定，通过v-model连接storeID，并在change事件中处理选中项变化。changeStores方法接收value和option作为参数，其中option.data.attrs.code提供了选项的关键信息。这个例子强调了Vue组件间的交互和数据流动。

:code="item"

<a-select v-model="addForm.storeID" placeholder="选择MarketingID后输入搜索"
        @change="changeStores">
// :code="item"  关键！！！
    <a-select-option :value="item.id" v-for="item in stores"  
                     :key="item.id" :code="item">
              {{ item.storeName }}
     </a-select-option>
 </a-select>

// change store 单选
// 获取 option.data.attrs.code  关键！！！！
changeStores (value, option) {
   console.info('value', value)
   console.info('option', option.data.attrs.code)
},