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

理想和远方_在路上2023-08-25 23:29

1.背景

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

2.实例

elementUI 中是可以支持获取点击项的整个对象的。

需注意 value-key="id" :value="item"

html 复制代码

<template>
  <el-select
    v-model="value"
    multiple
    v-model="obj" value-key="id" @change="change">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item">
    </el-option>
  </el-select>
</template>

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

延伸：

vue.runtime.esm.js:619 $Vue warn$ : <transition-group> children must be keyed: <ElTag>

在选择点击获取某个值是，"未选中"，原因为：value-key="id" id的值为数值类型

value-key="''+id" 将数值类型转换为字符串类型即可