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 属性。

相关推荐
dsyyyyy11013 小时前
JavaScript变量
开发语言·javascript·ecmascript
kyriewen4 小时前
手写 Promise.all、race、any:不到 30 行代码,解决并发异步的所有姿势
前端·javascript·面试
胡志辉的博客5 小时前
深入浅出理解浏览器事件循环:从一道输出题讲到 Chrome 源码
前端·javascript·chrome·chromium·event loop
代码不加糖5 小时前
js中不会冒泡的事件有哪些?
前端·javascript·vue.js
懂懂tty6 小时前
Vue2与Vue3之间API差异
前端·javascript·vue.js
老毛肚6 小时前
软件测试期末考试
vue.js
小二·6 小时前
Next.js 15 全栈开发实战
开发语言·javascript·ecmascript
杨若瑜7 小时前
本地开发环境慢?localhost的锅!
vue.js
Rain5097 小时前
2.1 Nest.js 项目初始化与模块化架构
开发语言·前端·javascript·后端·架构·数据分析·node.js
拾年2758 小时前
从零手写 Ajax:用原生 XHR 搭建前后端交互全流程
前端·javascript·ajax