element el-select 单选或多选时，需要绑定对象解决方法

最新推荐文章于 2025-02-19 11:37:54 发布

zou-dev

最新推荐文章于 2025-02-19 11:37:54 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/weixin_59423799/article/details/126268193

本文介绍了一个使用Vue.js实现的多选下拉框示例，通过value-key属性来指定显示项的唯一标识，并展示了如何绑定数据及处理选项改变的事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

核心代码：value-key

<template>
		<el-select v-model="params.value" value-key="name" @change="change">
			<el-option v-for="item in testArr" :key="item.name" :label="item.id"
				:value="item">
			</el-option>
		</el-select>
</template>
 
<script>
	export default {
		data() {
			return {
                params: {
                    id: '',
                    name；''
                },
				testArr:[{
					id: 1,
					name:'1'
				},{
					id: 2,
					name:'2'
				},{
					id: 3,
					name:'3'
				},{
					id: 4,
					name:'4'
				}],
				
			}
		},
		methods: {
			change(e) {
				console.log(e);
			}
		}
	}
</script>

多选下拉框时同理