Element的el-select组件change事件获取label的值

Khun_HWJ

已于 2023-02-21 11:30:08 修改

阅读量5.3k

点赞数 4

文章标签： vue.js elementui 前端

于 2023-02-21 11:26:52 首次发布

本文链接：https://blog.csdn.net/khun_hwj/article/details/129139490

版权

在Vue.js中使用ElementUI的el-select组件时，可以通过修改:value的值为对象形式，包含value和label属性，然后在change事件中解构params获取label值。示例代码展示了如何在selectChanged方法中获取选中的label，并将其绑定到model。另外，还提供了一个类似的例子，通过遍历数据源来获取与value匹配的label。

摘要由CSDN通过智能技术生成

在如下el-select组件的代码中，要想在change事件时获取label的值。

<el-select
  v-model="ruleForm.usualReviews"
  :readonly="true"
  class="oms-select"
  placeholder="请选择常用意见"
  @change="selectChanged"
>
  <el-option v-for="item in list"
    :key="item"
    :value="item.opinionId"
    :label="item.content"
  ></el-option>
</el-select>

我们可以修改:value的值为"{value:item.opinionId,label:item.content}"。

<el-select
  v-model="ruleForm.usualReviews"
  :readonly="true"
  class="oms-select"
  placeholder="请选择常用意见"
  @change="selectChanged"
>
  <el-option v-for="item in list"
    :key="item"
    :value="{value:item.opinionId,label:item.content}"
    :label="item.content"
  ></el-option>
</el-select>

再选择下拉框，触发selectChanged函数，则可以获取到label的值。

selectChanged(params){
  const { value, label } = params
  this.ruleForm.processReview = label
}

Element UI - el-select 同时获取 value 和 label 的值

<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.id);
  console.log(obj.name); // 这边的name就是对应label
}