获取element-ui中 el-select 的 id或整个object选中项

场景:接口不仅需要传入el-select中获取的 name值,还需要获取el-select选中项中的number值

html:

<!-- 添加或修改渠道信息维度对话框 -->
 <el-select v-model="cityDirector" placeholder="请选择" @change="changeHuman">
     <el-option v-for="item in humanVoOptions" :key="item.number" :label="item.name" :value="item.name"/>
</el-select>

js: 

// 方法一:
methods: {
  // 选择el-select值时,获取对应的id值。
  changeHuman(val) {
     let obj = {}
  // 找到选中项的整个object对象
     obj = this.humanVoOptions.find(item => {
        return item['name'] === val
     });
  // 获取对应的number属性
    this.employeeId=obj.number
  },
}

// 方法二:提取为公共方法,多处可直接用this.Select_str调用。
// 调用方法:this.employeeId=this.Select_str(this.humanVoOptions, 'name', name).number
// 1、定义获取element-ui 中 el-select 选中项的objetc对象 的公共方法(公共方法)。
// 2、在通过 .属性,获取对应的值。如:this.Select_str(......).number(属性)
// 3、options:el-select,v-for循环的Options数组。  valStr:需要查找的value绑定值的字符串形式。如:'name'。  val:el-select 标签中绑定的value值,如::value='item.name'
export function Select_str(options, valStr, val) {
  let obj = {}
  obj = options.find(item => {
    return item[valStr] === val
  });
  //   console.log(obj) //obj: 选择的那一条数据,即item,包含所有的值
  return obj
}

猜你喜欢

转载自blog.csdn.net/Shimeng_1989/article/details/127535098
今日推荐