elementUI的el-select传递item对象或其他参数的2种方法

方法1 :value="item" 绑定对象

只要:value绑定item对象就可以

value-key="value" 必须是item里的一个属性,绑定值为对象类型时必填

html 复制代码
 <el-select v-model="value" placeholder="请选择" value-key="value" @change="changeSelect">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item"></el-option>
</el-select>
javascript 复制代码
 			data() {
                return {
                    options: [{
                        value: '选项1',
                        label: '黄金糕'
                    }, {
                        value: '选项2',
                        label: '双皮奶'
                    }, {
                        value: '选项3',
                        label: '蚵仔煎'
                    }, {
                        value: '选项4',
                        label: '龙须面'
                    }, {
                        value: '选项5',
                        label: '北京烤鸭'
                    }],
                    value: ''
                }
            },
            methods: {
                changeSelect(val) {
                    console.log(val);// item对象
                }
            }

方法2 用find找到选中数据的item

有时候v-modal绑定的是表格的scope.row属性,以及可能会被其他因素影响。用:value="item"可能会出问题,这种情况就比较适合用find了,把选中值和数据列表做对比,找出选中的那个item

html 复制代码
<template>
  <el-select v-model="selectedValue" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValue: null,
      options: [
        { label: '选项1', value: 'option1', additionalData: '数据1' },
        { label: '选项2', value: 'option2', additionalData: '数据2' },
        // ...更多选项
      ]
    };
  },
  // 可以用watch监听,也可以用@change
  watch: {
    selectedValue(newValue) {
      const selectedItem = this.options.find(item => item.value === newValue);
      console.log(selectedItem); // 包含所有数据的选中项
    }
  }
};
</script>
相关推荐
冰天糖葫芦10 分钟前
VUE实现数字翻牌效果
前端·javascript·vue.js
Brilliant Nemo12 分钟前
集成CommitLInt+ESLint+Prettier+StyleLint+LintStaged
javascript
嘉琪00115 分钟前
2025 js——面试题(7)——ajax相关
开发语言·javascript·ajax
南岸月明20 分钟前
我与技术无缘,只想副业搞钱
前端
liu_yueyang22 分钟前
JavaScript VMP (Virtual Machine Protection) 分析与调试
开发语言·javascript·ecmascript
gzzeason1 小时前
在HTML中CSS三种使用方式
前端·css·html
hnlucky1 小时前
《Nginx + 双Tomcat实战:域名解析、静态服务与反向代理、负载均衡全指南》
java·linux·服务器·前端·nginx·tomcat·web
huihuihuanhuan.xin1 小时前
前端八股-promise
前端·javascript
星语卿1 小时前
浏览器重绘与重排
前端·浏览器
西瓜_号码1 小时前
React中Redux基础和路由介绍
javascript·react.js·ecmascript