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>
相关推荐
fruge6 小时前
React 2025 完全指南:核心原理、实战技巧与性能优化
javascript·react.js·性能优化
速易达网络8 小时前
Bootstrap 5 响应式网站首页模板
前端·bootstrap·html
etsuyou8 小时前
js前端this指向规则
开发语言·前端·javascript
lichong9518 小时前
Android studio 修改包名
android·java·前端·ide·android studio·大前端·大前端++
cai_huaer8 小时前
BugKu Web渗透之 cookiesWEB
前端·web安全
lichong9518 小时前
Git 检出到HEAD 再修改提交commit 会消失解决方案
java·前端·git·python·github·大前端·大前端++
友友马8 小时前
『 QT 』QT控件属性全解析 (一)
开发语言·前端·qt
不想上班只想要钱9 小时前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
流***陌9 小时前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
岁月宁静9 小时前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能