从el-select中获取多个数值

Question

 <el-select v-model="value" placeholder="请选择"  @change="choose(value)">
      <el-option    
       v-for="item in options"
       :key="item.id"
       :label="item.name"
       :value="item.grade_code"     
       >
      </el-option>
      </el-select>
----------------------------------
 choose:function(value){
                alert(value);
                }       

现在的话选中的值value可以出来，但是我需要选中选项的时候同时获取它的key和value，请问有什么办法可以兼得，谢谢

Answer 1

你的数据都是用options 循环出来的。
在choose 中直接通过value 过滤就行了

choose: function(value) {
    let choosenItem = this.options.filter(item => item.grade_code === value)[0];
    // choosenItem 中有你需要的所有信息
}

Answer 2

element-ui change方法中参数只有一个，就是选中的值（即value），如果你希望key也获取到的话，以下两个方法参考下：
1.将grade_code和id使用特殊字符链接，如"--"，然后赋值到value中，选中之后再将这两个split分别取出，是麻烦了一点，但能达到目的。
2.在choose方法中拿到value之后到options数组中进行比对各元素，如果value==item.grade_code，返回item.id，也就是key值

Answer 3

暴力一点的话给el-select一个ref，比如ref="sel"

// 获取label
this.$refs.sel.selectedLabel
// 获取value
this.$refs.sel.value

Answer 4

直接:value="item.id"+','+"item.name"+','+"item.grade_code"
然后把value split啊。。。。。。。简单粗暴。。。。

Answer 5

:value="[item.id, item.grade_code]"

用的时候，可以使用

this.value[0]

代表的item.id

this.value[1]

代表的item.grade_code

Answer 6

使用 @change="choose($event, 你想传的值)"