vue select 获取value和lable

前言:

1、这几天项目用到了vue,需要在一个form表单里添加一个下拉框，并且将下拉框的value和label的值都获取到，并插入到数据库里，

数据集合vendorListTest是从后台返回的，该部分代码省略；

2、select 默认返回value,若想返回label和value，需在select标签上添加：label-in-value="true",在它触发onchange事件时，便可以获取label和value的值。

3、更多插件详见：https://www.iviewui.com/docs/guide/install

 

xxx.vue界面

 
 

   
   

    
    

   
   
   
   

    
    

     
     <FormItem label="厂家名称" prop="vendorName">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
       
     
     <Select v-model="addForm.vendorId" :label-in-value="true" @on-change="getVendorId">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     <Option v-for="item in vendorListTest"
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     :value=
     
     "item.vendorId"
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     :key=
     
     "item.vendorId"
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     :lable=
     
     "item.vendorName">{{ item.vendorName }}
     
     </Option>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     </Select>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </FormItem>
    
    
   
   
 
 

 

xxx.js界面

 
 

   
   

    
    

   
   
   
   

    
    

     
     export 
     
     default {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         data() {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             return {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
            
     
     vendorListTest: [
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                     {
     
     "vendorId":
     
     "TJ-HM-guangdaweiye",
     
     "vendorName":
     
     "光大伟业"},
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                     {"vendorId":"TJ-HM-maituo","vendorName":"迈拓"},
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                     {"vendorId":"TJ-HM-weian","vendorName":"伟岸"},
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                     {"vendorId":"TJ-HM-zhonghuan","vendorName":"中环"},
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                     {"vendorId":"TJ-HUB-hanguang","vendorName":"汉光"},
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                     {"vendorId":"TJ-HUB-hengrui","vendorName":"恒瑞"},
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                     {"vendorId":"TJ-HUB-zhongsheng","vendorName":"中盛"}]
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                 },
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             };
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         },
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     methods: {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     getVendorId: function (val) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                 let that = this;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                 that.addForm.vendorName=val.label;//获取label
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                 that.addForm.vendorId=val.value;//获取value
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             }
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         }
    
    
   
   

   
   

    
    

   
   
   
   

    
    
   
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     };
    
    
   
   
 
 

效果截图