element ui – el-select获取点击项的整个对象item

本文介绍: 在vue2引入 elementUI之后,经常会遇到此类需求,el–select 获取点击项的整个对象 item，而不是默认的v–model 项目。

el–select 获取 点击项的整个对象item

前言
方法
示例
总结

前言

在使用 el–select 的时候，经常会通过 change 事件来获取当前绑定的 value ，即对象中默认的某个 key 值。但在某些特殊情况下，如果想要获取的是点击项的整个对象 i t em，该怎么做呢？

方法

elementUI 中是可以支持获取点击项的整个对象的。
使用方法：通过指定 value–k e y 和绑定 value值为整个对象

在这里插入图片描述

注意：如果 Sel ec t 的绑定值为对象类型，请务必指定 value–k e y 作为它的唯一性标识。

示例

&lt;template&gt;
  &lt;!--v-model绑定一个对象值，指定value-key标识--&gt;
  &lt;el-select v-model="obj" value-key="id" @change="change" placeholder="请选择">
    <el-option
        v-for="(item,index) in options"
        :key="index"
        :label="item.name"
        <!--绑定整个对象item-->
        :value="item">
      {{ item.name }}
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: "test",
  data() {
    return {
      options: [{
        id: 1,
        name: '黄金糕'
      }, {
        id: 2,
        name: '双皮奶'
      }, {
        id: 3,
        name: '蚵仔煎'
      }, {
        id: 4,
        name: '龙须面'
      }, {
        id: 5,
        name: '北京烤鸭'
      }],
      obj: {}
    }
  },
  methods: {
    change(item) {
      console.log(item);// 打印整个对象
    }
  }
}
</script>