el-checkbox 实现展示区分 label 和 value(展示值与选中获取值需不同)

news2024/11/17 9:27:24

elementplus 的 el-checkbox 官方代码中的多选框组实例如下:

在这里插入图片描述

上方代码中选中哪个选项就会往 checkList 数组中加入选项的 label 值,如果需要实现展示的值与选中的值不一样要怎么实现呢?

解决方法

el-checkbox组件中存在插槽,只需要在 el-checkbox 标签中间传入要展示的文本即可,代码如下:

<el-checkbox-group v-model="status">
    <el-checkbox 
        v-for="(value, key) in statusList"
        :key="key"
        :label="key"
    >
        {{ value }}
    </el-checkbox>
</el-checkbox-group>

上方代码中,展示出来的是 value 的值,而实际选中后存入数组的是 key 值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1410395.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Linux】 开始使用 gcc 吧!!!

Linux 1 认识gcc2 背景知识3 gcc 怎样完成 &#xff1f;3.1 预处理预处理^条件编译 3.2 编译3.3 汇编3.4 链接 4 函数库5 gcc 基本选项Thanks♪(&#xff65;ω&#xff65;)&#xff89;谢谢阅读下一篇文章见&#xff01;&#xff01;&#xff01; 1 认识gcc 我们在windows环…

02.领域驱动设计:了解领域、子域、核心域、通用域、支撑域、通用语言和限界上下文

目录 概要 1、领域 2、子领域 建立领域模型步骤&#xff1a; 3、核心域 4、通用域 5、支撑域 6、思考题 7、通用语言 8、限界上下文 限界上下文和微服务的关系 9、总结 限界上下文在微服务设计中的作用和意义是什么 概要 领域驱动设计&#xff08;DDD&#xff09;…

Web09--jQuery基础

1、jQuery概述 1.1 什么是jQuery jQuery是一款优秀的JavaScript的轻量级框架之一&#xff0c;封装了DOM操作、事件绑定、ajax等功能。特别值得一提的是基于jQuery平台的插件非常丰富&#xff0c;大多数前端业务场景都有其封装好的工具可直接使用。 jQuery下载和版本介绍 官…

qml中访问控件内部的子项

如何访问Repeater类型内部的子项、Row等布局类型内部的子项以及ListView内部的子项等。。。 1、测试代码 import QtQuick 2.0 import QtQuick.Controls 2.12 import QtQuick.Window 2.12 import QtQuick.Layouts 1.3 import QtQml 2.12Window {id: windowobjectName: "m…

彩色图像处理之彩色图像分割的python实现——数字图像处理

原理 彩色图像分割是图像处理领域的一个重要技术&#xff0c;它旨在将一幅彩色图像划分为多个区域或对象。其基本原理包括以下几个方面&#xff1a; 像素特征的提取&#xff1a;彩色图像分割首先涉及到像素级的特征提取。在彩色图像中&#xff0c;常用的特征包括颜色、纹理和…

Javadoc的讲解使用

概述&#xff1a;JavaDoc 是用于生成 Java 代码文档的工具。通过编写 JavaDoc 注释&#xff0c;可以为代码中的类、接口、方法、字段等元素添加文档注释&#xff0c;这些注释将被 JavaDoc 工具解析并生成相应的 HTML 文档。 目录 讲解 使用 结果 讲解 下面是一些关于 Java…

常用通信总线学习——RS232与RS485

RS232概述 RS-232标准接口&#xff08;又称EIA RS-232&#xff09;是常用的串行通信接口标准之一&#xff0c;它是由美国电子工业协会(Electronic Industry Association&#xff0c;EIA)联合贝尔系统公司、调制解调器厂家及计算机终端生产厂家于1970年共同制定&#xff0c;其全…

RocketMQ源码阅读-七-高可用

RocketMQ源码阅读-七-高可用 概述NameServer高可用Broker注册到NameServerProducer、Consumer 访问 Namesrv Broker高可用Broker主从配置Master、Slave通信组件Master与Slave的通信协议Slave节点逻辑Master节点逻辑Master_SYNC模式Producer发消息Consumer消费消息 总结 本篇分析…

如何配置Tomcat服务环境并实现无公网ip访问本地站点

文章目录 前言1.本地Tomcat网页搭建1.1 Tomcat安装1.2 配置环境变量1.3 环境配置1.4 Tomcat运行测试1.5 Cpolar安装和注册 2.本地网页发布2.1.Cpolar云端设置2.2 Cpolar本地设置 3.公网访问测试4.结语 前言 Tomcat作为一个轻量级的服务器&#xff0c;不仅名字很有趣&#xff0…

前出深入-机器学习

文章目录 一、K近邻算法1.1 先画一个散列图1.2 使用K最近算法建模拟合数据1.3 进行预测1.4 K最近邻算法处理多元分类问题1.5 K最近邻算法用于回归分析1.6 K最近邻算法项目实战-酒的分类1.6.1 对数据进行分析1.6.2 生成训练数据集和测试数据集1.6.3 使用K最近邻算法对数据进行建…

python3去除图片中的文字水印

声明&#xff1a;本文为python技术分享&#xff0c;仅供学习使用。 请勿用于商业用途&#xff01;&#xff01;&#xff01; 请勿用于商业用途&#xff01;&#xff01;&#xff01; 请勿用于商业用途&#xff01;&#xff01;&#xff01; 以下为代码&#xff1a; import …

LeetCode、875. 爱吃香蕉的珂珂【中等,最小速度二分】

文章目录 前言LeetCode、875. 爱吃香蕉的珂珂【中等&#xff0c;最小速度二分】题目及分类思路分析及代码实现代码优化 资料获取 前言 博主介绍&#xff1a;✌目前全网粉丝2W&#xff0c;csdn博客专家、Java领域优质创作者&#xff0c;博客之星、阿里云平台优质作者、专注于Ja…

多维时序 | Matlab实现EVO-TCN-Multihead-Attention能量谷算法优化时间卷积网络结合多头注意力机制多变量时间序列预测

多维时序 | Matlab实现EVO-TCN-Multihead-Attention能量谷算法优化时间卷积网络结合多头注意力机制多变量时间序列预测 目录 多维时序 | Matlab实现EVO-TCN-Multihead-Attention能量谷算法优化时间卷积网络结合多头注意力机制多变量时间序列预测效果一览基本介绍程序设计参考资…

部署TOMCAT详解

目录 一、Tomcat概述 1.1Tomcat简介 1.2、Tomcat历史 1.3Tomcat官网 二、部署单实例Tomcat 1.下载Tomcat包 2. 解压Tomcat包 3.配置环境变量 4.刷新环境变量 5.查看tomcat是否安装成功 6.启动Tomcat 三、Tomcat目录介绍 1、tomcat主目录介绍 2.webapps目录介绍 3…

Unity——八叉树的原理与实现

八叉树原理 八叉树&#xff08;Octree&#xff09;是一种用于在三维空间中进行空间分割的数据结构。它将三维空间递归地划分为八个子空间&#xff0c;每个子空间对应于一个八叉树节点。这种分割方式可以有效地组织和管理场景中的对象&#xff0c;提高检索效率&#xff0c;特别…

会计等式与会计事项

目录 一. 会计等式二. 会计事项 \quad 一. 会计等式 \quad 最后利润是归所有者权益所有, 就回到了原有等式 \quad \quad \quad 二. 会计事项 \quad 会计事项: 引起会计要素增减变化的经济业务。 会计六要素: 资产 负债 所有者权益 收入 费用 利润 任何会计事项都不会破坏会计…

C++ 数论相关题目(欧拉函数、筛法求欧拉函数)

1、欧拉函数 给定 n 个正整数 ai &#xff0c;请你求出每个数的欧拉函数。 欧拉函数的定义 1∼N 中与 N 互质的数的个数被称为欧拉函数&#xff0c;记为 ϕ(N) 。 若在算数基本定理中&#xff0c;Npa11pa22…pamm &#xff0c;则&#xff1a; ϕ(N) Np1−1p1p2−1p2…pm−1p…

人工智能时代:让AIGC成为你的外部智慧源(文末送书)

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;数据结构、网络奇遇记 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. 什么是AIGC?二. AIGC如何运作&#xff1f;2.1 步骤一&#xff1a;收集数据2.…

day32WEB 攻防-通用漏洞文件上传二次渲染.htaccess变异免杀

本章节知识点&#xff1a; 1 、文件上传 - 二次渲染 2 、文件上传 - 简单免杀变异 3 、文件上传 -.htaccess 妙用 4 、文件上传 -PHP 语言特性 前置知识&#xff1a; 后门代码需要用特定格式后缀解析&#xff0c;不能以图片后缀解析脚本后门代码 ( 解析漏洞除外 ) 如&…

Aleo测试网回顾-测试网期间共释放了多少积分

上一篇我们整理了Aleo的详细项目介绍&#xff0c;Aleo项目详细介绍-一个兼顾隐私和可编程性的隐私公链-CSDN博客 接下来&#xff0c;让我们盘点下测试网期间的积分释放情况&#xff0c;测试网期间的奖励积分也将是Aleo主网上线后的抛压来源。测试网期间共计释放了4000万的积分…