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>
相关推荐
mCell6 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip6 小时前
Node.js 子进程:child_process
前端·javascript
excel9 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel10 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼11 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping11 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙12 小时前
[译] Composition in CSS
前端·css
白水清风12 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix13 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780013 小时前
new、原型和原型链浅析
前端·javascript