Element ui select同时获取value和label的值

4,275 阅读1分钟
<el-form-item v-if="isMD" label="业务员名称">
              <el-select v-model="addBM.storeManagerName" @change="selectGet" filterable style="display:block;" placeholder="请选择门店业务员名称">
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
          </el-form-item>
          
          
          
          
//下拉框选中事件
    selectGet(vId){//这个vId也就是value值
      console.log(ha);
      let obj = {};
      obj = this.userList.find((item)=>{//这里的userList就是上面遍历的数据源
          return item.id === vId;//筛选出匹配数据
      });
      console.log(obj.name);//我这边的name就是对应label的
    

value绑定的是对象时,在el-select 添加value-key="id"属性,el-option中添加:key="item.id"属性。其中value-key的值与key绑定的属性值对应。

<el-select v-model="provId" placeholder="请选择省" size="small" value-key="id">
     <el-option value="" label="全部"></el-option>
     <el-option v-for="item in provList" :key="item.id" :label="item.name" :value="item" ></el-option>
</el-select>