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

方法1 :value=“item” 绑定对象

只要:value绑定item对象就可以
在这里插入图片描述
value-key="value" 必须是item里的一个属性，绑定值为对象类型时必填

 <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>

 			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

<template><el-select v-model="selectedValue" placeholder="请选择"><el-optionv-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监听，也可以用@changewatch: {selectedValue(newValue) {const selectedItem = this.options.find(item => item.value === newValue);console.log(selectedItem); // 包含所有数据的选中项}}
};
</script>