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

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" 将数值类型转换为字符串类型即可

相关推荐
千里码aicood15 分钟前
python+vue旅游购票管理系统设计(源码+文档+调试+基础修改+答疑)
vue.js·python·旅游
麦麦大数据2 小时前
F038 vue+flask 微博舆情热搜情感分析大数据分析系统|前后端分离架构
vue.js·架构·flask·情感分析·微博·舆情分析
qq_339191142 小时前
vue3 npm run dev局域网可以访问,vue启动设置局域网访问,
前端·vue.js·npm
橙某人5 小时前
Vue3 + Pinia 移动端Web应用:页面缓存策略解决方案💡
前端·javascript·vue.js
冲刺逆向6 小时前
【js逆向案例二】瑞数6 深圳大学某医院
前端·javascript·vue.js
西木之斤6 小时前
vue和react实例简单对比
vue.js·react.js
慧一居士7 小时前
Vue 中 <keep-alive> 功能介绍,使用场景,完整使用示例演示
前端·vue.js
晴殇i7 小时前
解锁Web Workers:解决90%前端性能瓶颈的利器
前端·javascript·vue.js
Sheldon一蓑烟雨任平生7 小时前
Vue3 透传 Attributes
vue.js·vue3·透传attributes·禁用attributes继承·深层组件继承
xu_duo_i8 小时前
vue2+elementUI后端返回二进制流,前端下载实现
前端·javascript·elementui