VUE el-select Select 选择器 选项是对象,显示是一个值name ,但是绑定的对象值是id方案

在 Vue 中使用 Element UI 的 el-select 组件时,如果希望显示对象的某个属性(如 name),但实际绑定的是对象的另一个属性(如 id),需要使用 value-key 和 label 属性来分别指定这两个属性。但是,Element UI 的 el-select 组件并没有直接的 value-key 属性。不过,可以通过 v-model 绑定、:label 属性和自定义模板来实现这个需求。

以下是一个示例,说明如何在 el-select 中实现这个需求:

  1. 假设有一个对象数组,每个对象都有 id 和 name 属性。
javascript 复制代码
data() {  
  return {  
    options: [  
      { id: 1, name: 'Option 1' },  
      { id: 2, name: 'Option 2' },  
      // ... 其他选项  
    ],  
    selectedId: null // 用于绑定选择的值(对象的id)  
  };  
}
  1. 使用 el-select 并结合 v-model、:label 和自定义的 el-option 模板来实现。
javascript 复制代码
<template>  
  <el-select v-model="selectedId" placeholder="请选择">  
    <el-option  
      v-for="item in options"  
      :key="item.id"  
      :label="item.name"  
      :value="item.id">  
    </el-option>  
  </el-select>  
</template>

在这个示例中,v-model="selectedId" 用于绑定选择的值,该值将是选中项的 id。:label="item.name" 用于指定在选项中显示的文本,即对象的 name 属性。:value="item.id" 指定了当该选项被选中时,v-model 绑定的值将是什么。

当用户选择一个选项时,selectedId 将被更新为选中项的 id,而 el-select 下拉列表中显示的是每个选项的 name 属性。

相关推荐
ZC跨境爬虫8 小时前
跟着 MDN 学JavaScript day_10:数组——数据的有序集合
android·java·开发语言·前端·javascript
晓13138 小时前
【Cocos Creator 2.x】篇——第五章 游戏常用关键技术
前端·javascript·vue.js·游戏引擎
W_LuYi1858 小时前
Tauri + Rust + Vue 3 打造极速轻量桌面应用
java·开发语言·vue.js·rust
qq4356947018 小时前
Vue03
javascript·vue.js
樱花的浪漫9 小时前
Typescript、Zod基础
前端·javascript·人工智能·语言模型·自然语言处理·typescript
用户549591657509 小时前
TinyVue Tree树形控件完全指南
vue.js
竹林8189 小时前
监听智能合约事件,我用 wagmi v2 踩了三天坑,终于找到了稳定方案
前端·javascript
用户852495071849 小时前
Bun 到底是什么?一个比 Node.js "更快更香"的 JS 运行时
javascript·程序员
Momo__9 小时前
SSR 懒水合四件套 — 99%的人不知道 Vue 3.5 藏了这些水合策略
前端·vue.js·性能优化
riuphan9 小时前
JavaScript 事件循环:单线程异步编程的核心机制
前端·javascript