element ui Checkbox 多选框组件 lable不支持Object类型的值的问题

浅浅记录一下,遇到这个问题的心理路程吧,首先我遇到的问题是多选框的值回显不打对勾,(例如:你新增的时候多选,然后点击编辑的时候选过的值没有被勾选,其实是被勾选上了,但是没有显示对勾,因为我点击已经选择过值就会取消勾选,说明这个值其实是回显了,但是不显示对勾),然后我就去查element ui,发现他的多选框的label只支持string / number / boolean,不支持object的形式,但是我的业务场景需要label的类型为object,于是尝试了各种方法之后,找到了一个最为合适的解决方案

 1.写一个新组件


<script>
// new-el-checkbox.vue 支持OBJECT 类型
import { defineComponent } from '@vue/composition-api'
import { Checkbox } from 'element-ui'
import _isEqual from 'lodash/isEqual'

// Now support array of object by adding _isEqual to compare the values
// Specify the value of checkbox with 'label' prop, not 'value' prop
export default defineComponent({
  extends: Checkbox,
  computed: {
    // eslint-disable-next-line vue/return-in-computed-property
    isChecked() {
      if ({}.toString.call(this.model) === '[object Boolean]') {
        return this.model
      } else if (Array.isArray(this.model)) {
        return this.model.find((item) => _isEqual(item, this.label))
      } else if (this.model !== null && this.model !== undefined) {
        return this.model === this.trueLabel
      }
    },
  },
  methods: {
    addToStore() {
      if (Array.isArray(this.model)) {
        const isExisted = this.model.find((item) => _isEqual(item, this.label))
        if (!isExisted) this.model.push(this.label)
      } else {
        this.model = this.trueLabel || true
      }
    },
  },
})
</script>

2.在你的多选框页面引用上面的组件,然后将下面的方法进行改写你的多选框组件

<el-checkbox-group v-model="value" >
    <new-el-checkbox  v-for="item in Options" :label="item" :key="item.id">{{ item.label  }}
    </new-el-checkbox>
</el-checkbox-group>

<script>
import newElCheckbox "@/components/newCheckbox.vue";
export default{
    components:{
    newElCheckboxfrom
  },
}
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux操作系统——进程(六) 进程地址空间

进程地址空间 C/C程序员一般将我们所写的程序看成如下这种结构&#xff1a; 我们所写的程序通过编译编译之后就可以以这样的方式进行分布. 我们先通过编写一段C语言代码来进行验证&#xff1a; 运行结果&#xff1a; 我们可以看出来上述地址遵循的就是我们上面画的一种结构。…

【附视频解析】Jmeter接口之间关联调用(获取上一个接口的返回值作为下一个接口的请求参数)

正则表达式&#xff1a; 具体如何操作&#xff1a; 1. 草稿保存&#xff0c; 此请求的响应数据的id 为发布总结的请求参数draft_id 2. 草稿保存的响应数据 3.在草稿保存的请求中&#xff0c;添加后置处理器- 正则表达式提取器&#xff0c; 提取响应数据的id信息 4. 发布总结请…

Java 缓存中间件

Java 缓存中间件 关键词&#xff1a;Spring Cache、J2Cache、JetCache 一 、JSR 107 JSR107 中制订了 Java 缓存的规范。 因此&#xff0c;在很多缓存框架、缓存库中&#xff0c;其 API 都参考了 JSR 107 规范。 img Java Caching 定义了 5 个核心接口 CachingProvider - 定义…

私有部署ELK,搭建自己的日志中心(三)-- Logstash的安装与使用

一、部署ELK 上文把采集端filebeat如何使用介绍完&#xff0c;现在随着数据的链路&#xff0c;继续~~ 同样&#xff0c;使用docker-compose部署&#xff1a; version: "3" services:elasticsearch:container_name: elasticsearchimage: elastic/elasticsearch:7.9…

Kafka学习笔记1(千峰教育)

Kafka学习笔记1&#xff08;千峰教育&#xff09; 一、为什么使用消息队列1.使用同步的通信方式来解决多个服务之间的通信2.使用异步的通信方式 二、消息队列的流派1.有broker2.无broker 三、Kafka的基本知识1.Kafk2a的安装2.Kafka中的一些基本概念3.创建topic4.发送消息5.消费…

sonarqube安装踩坑记录

如果用java1.8和mysql&#xff0c;则sonarqube版本不能超过7.8&#xff0c;看这里。 sonarqube7.8安装包地址&#xff1a; https://binaries.sonarsource.com/Distribution/sonarqube/sonarqube-7.8.zip 安装步骤&#xff1a; 1、下载sonarqube安装包 wget https://binari…

【PowerMockito:编写单元测试过程中采用when打桩失效的问题】

问题描述 正如上图所示&#xff0c;采用when打桩了&#xff0c;但是&#xff0c;实际执行的时候还是返回null。 解决方案 打桩时直接用any() 但是这样可能出现一个mybatisplus的异常&#xff0c;所以在测试类中需要加入以下代码片段&#xff1a; Beforepublic void setUp() …

软件测试/测试开发丨Pytest 参数化用例

参数化 通过参数的方式传递数据&#xff0c;从而实现数据和脚本分离。并且可以实现用例的重复生成与执行。 参数化应用场景 测试登录场景 测试登录成功&#xff0c;登录失败(账号错误&#xff0c;密码错误)创建多种账号: 中⽂文账号&#xff0c;英⽂文账号 普通测试用例方法 …

nginx 1.14.0引入自己使用C语言写的模块

参考的一篇博客《为NGINX编译第三方动态模块》 源码的地址&#xff1a;https://github.com/perusio/nginx-hello-world-module/tree/master。 源码被我放到系统中/root/nginx-hello-world-module目录下&#xff0c;ls /root/nginx-hello-world-module可以看一下源码里边的内容。…

C++初阶(十七)模板进阶

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、非类型模板参数二、模板的特化1、概念2、函数模板特化3、类模板特化1、全特化2、偏特化 三…

【tcp】TCP CLOSE_WAIT问题分析与定位

一、问题背景 某日&#xff0c;运维突然在群里突然丢出告警信息&#xff1a; 对象类型&#xff1a;主机 检测规则&#xff1a;NET.TCP.CLOSE.WAIT 告警内容&#xff1a;CLOSE_WAIT状态的TCP连接数大于500 ....image.png 上面告警信息已经说的很明白&#xff0c;CLOSE_WAIT状…

Ruff物联网数采网关助力工业企业数字化转型,降本增效

如今&#xff0c;随着工厂数字化转型进程的加速&#xff0c;越来越多的企业对于设备数据感知层及传输层的应用越来越重视&#xff0c;因此工业数采网关也走进了很多人的视野&#xff0c;在工厂数字化转型中扮演着关键角色。 物联网数据采集网关能将各种传感器、执行器等设备连…

主浏览器优化之路1——你现在在用的是什么浏览器?Edge?谷歌?火狐?360!?

上一世&#xff0c;我的浏览器之路 引言为什么要用两个浏览器为什么一定要放弃火狐结尾给大家一个猜数字小游戏&#xff08;测运气&#xff09; 引言 小时候&#xff0c;我一开始上网的浏览器是2345王牌浏览器吧&#xff0c; 因为上面集成了很多网站&#xff0c;我记得上面有7…

五轴机床测头:高精度曲面检测的得力工具

五轴机床测头广泛应用于制造业中的高精度加工领域。它能够准确、快速地检测出曲面的形状、尺寸和特征&#xff0c;为生产过程中的质量控制提供了重要支持。 五轴机床测头是一款具有3维5向探测功能的红外触发机床测头&#xff0c;广泛应用于 3 轴、5 轴加工中心&#xff0c;以及…

【Bootstrap学习 day1】

Bootstrap5 网格的基本结构 等宽响应式列 Bootstrap 5 网格系统有6个类&#xff1a; .col-针对所有设备 col-sm平板-屏幕宽度等于或大于576px。 .col-md-桌面显示器&#xff0c;屏幕宽度等于或大于768px col-lg大桌面显示器&#xff0c;屏幕宽度等于或大于992px col-xl特大桌面…

百度CTO王海峰:文心一言用户规模破1亿

▶ 写在前面▶ 飞桨开发者已达1070万▶ 文心一言用户规模破亿&#xff0c;日提问量快速增长 ▶ 写在前面 “文心一言用户规模突破 1 亿。”12 月 28日&#xff0c;百度首席技术官、深度学习技术及应用国家工程研究中心主任王海峰在第十届 WAVE SUMMIT 深度学习开发者大会上宣布…

事务的简介

一、什么是事务 事务是一组数据库的操作序列&#xff0c;包含一个或多个sql操作命令&#xff08;增删改&#xff09;&#xff0c;事务将所有的操作命令看做一个不可分割的整体&#xff0c;向数据库系统提交或撤销操作&#xff0c;所有操作要么执行要么不执行。 ●事务是一种机…

大创项目推荐 深度学习YOLO安检管制物品识别与检测 - python opencv

文章目录 0 前言1 课题背景2 实现效果3 卷积神经网络4 Yolov55 模型训练6 实现效果7 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习YOLO安检管制误判识别与检测 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&…

计算机毕业设计-----ssm流浪猫狗救助管理系统

项目介绍 流浪猫狗救助管理系统。该项目分为前后台&#xff1b; 前台主要功能包括&#xff1a;会员的注册登陆,流浪猫狗知识&#xff0c;领养中心&#xff0c;团队活动&#xff0c;流浪宠物详情&#xff0c;申请领养等&#xff1b; 后台主要功能包括&#xff1a;管理员的用户…

【SpringCloud笔记】(9)分布式配置中心之Config

Config 概述 分布式系统当前面临的配置问题 微服务意味着要将单体应用中的业务拆分成一个个子服务&#xff0c;每个服务的粒度相对较小&#xff0c;因此系统中会出现大量的服务。 比如&#xff1a;有n个微服务连接同一套数据库&#xff0c;当连接数据库需要发生变动时&…