码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 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 属性。
    data() {  
      return {  
        options: [  
          { id: 1, name: 'Option 1' },  
          { id: 2, name: 'Option 2' },  
          // ... 其他选项  
        ],  
        selectedId: null // 用于绑定选择的值(对象的id)  
      };  
    }
    
    1. 使用 el-select 并结合 v-model、:label 和自定义的 el-option 模板来实现。
    <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 属性。

  • 相关阅读:
    Flutter高仿微信-第31篇-单聊-表情
    springboot读取配置文件自定义参数和自定义配置文件参数
    2013软专算法题T1(折半查找)
    Python----函数中的说明文档
    学习c语音的自我感受
    三、equals重写规范
    深入理解Kafka核心设计与实战原理 笔记
    作为外贸业务员,为什么我经常随机轻松 就“捡“到精准潜在客户
    v-if失效原因
    如何用Postman做接口自动化测试
  • 原文地址:https://blog.csdn.net/mqiqe/article/details/139674171
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号