element ui下拉框中的内容和下拉框的id同时传到后台

一般下拉框只传一个参数到后台。我们的需求是需要用户名和其id同时传到后台。

<el-row class="top-block padding-20px" :gutter="40">
      <el-col :xs="24" :sm="12" :lg="6">
        <el-row type="flex" class="row-bg" justify="">
          <el-col :xs="6" :sm="6" :lg="6" class="flex-align-center">
            <label for="">归属人：</label>
          </el-col>
          <el-col :xs="18" :sm="18" :lg="18">
            <el-select
              v-model="form.username"
              placeholder="请选择"
              style="width: 100%"
              @focus="getStatusList"
              @change="changeSelect(form.username)"
            >
              <el-option
                v-for="(item,index) in optionsStatus"
                :key="index"
                :label="item.username"
                :value="item.username"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-col>
</el-row>

• @focus为点击select框时被触发的方法
• @change为点击要选中的值时被触发的方法
• 给el-option设置以下属性：
  v-for="item in optionStatus"   // 遍历获取到的select列表data
  :key="index"             // 使用v-for要加key，避免遍历出错
  :value="item.username"           // option实际值，发送到后台的值
  :label="item.username"         // option的显示值，用户看到的值

 获取的下拉框数据

async getStatusList() {
      const { data } = await alluser();
      console.log(data)
      if (data) {
        this.optionsStatus = data.data.list;
      }
    },

获取点击时的id

changeSelect(val){
      console.log(val)
      this.optionsStatus.map((s,index)=>{
        console.log("S",s)
        if(s.username ===val){
          this.ownerUserid = this.optionsStatus[index].id
        }
        console.log("this.ownerUserid",this.ownerUserid)
      })
    },

成功获取点击下拉框时的id值