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

前言

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

方法

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

注意：如果 Select 的绑定值为对象类型，请务必指定 value–key 作为它的唯一性标识。

示例

<template>
  <!--v-model绑定一个对象值，指定value-key标识-->
  <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>

总结

官方文档: Select 选择器

代码007普通

打赏 收藏 海报 链接