el-checkbox和el-switch绑定一个Number值

news2024/11/24 0:13:38

因为我们对状态这种字段,后端一般返回的是Number值。0为正常,1为停用。
el-switch,el-checkbox这种控件呢,一般是绑定布尔值的。原来我的做法是使用value和change事件来做转换,而不是v-model。但是后来发现,el-checkbox对于这种做法并没有效果。

 <el-switch
    :value="!row.status"
    @change="value => {changeStatus(row, value)}"
  />
  
    // 修改状态
    changeStatus(row, value) {
      console.log(value, row)
      row.status = Number(!value)
    },

后来看文档才发现,是可以使用v-model来绑定Number,String类型的。只需要传入参数,指定他的true值和false值即可。

在这里插入图片描述

在这里插入图片描述

正确写法

<el-checkbox v-model="data.status" :true-label="1" :false-label="0">停用</el-checkbox>

<el-switch v-model="data.status" :inactive-value="1" :active-value="0">停用</el-switch >

在这里插入图片描述

所以还是要细看文档啊呜呜呜~

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

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

相关文章

row_number 和 cte 使用实例:按照队列进行数据抵消

row_number 和 cte 使用实例:按照队列进行数据抵消 问题来源模拟数据使用 cte使用sum结合开窗函数结合 row_number 最终实现完整的模拟代码小结问题来源 今天无聊的翻了翻以前的论坛的帖子。。。嗯,想把一些没有什么价值的消息记录给删除掉,就是那些专家分获取记录。 毕竟,…

二次元少女-InsCode Stable Diffusion 美图活动一期

一、 Stable Diffusion 模型在线使用地址&#xff1a; https://inscode.csdn.net/inscode/Stable-Diffusion 二、模型相关版本和参数配置&#xff1a; 模型版本&#xff1a;chilloutmix_NiPrunedFp32Fix.safetensors 采样方法(Sampler)Sampling method&#xff1a;DPM SDE …

Elasticsearch--客户端

Es客户端 语言无关 ​ java最常用的客户端是Java Client、Java Rest Client、Java Transport Client Java Client 从es7.17开始&#xff0c;官方推出Java Client&#xff0c;并且将Java Rest Client标为Deprecated&#xff08;过期&#xff09; 要求jdk至少要jdk8 具体用法…

大模型技术发展概述 -(四)

文本内容参考论文《A Survey of Large Language Models》 论文标题&#xff1a;A Survey of Large Language Models 论文链接&#xff1a;https://arxiv.org/pdf/2303.18223v10.pdf 大模型技术发展概述 -&#xff08;四&#xff09; 6. 使用方法6.1 上下文学习6.1.1 提示形式6.…

网络套接字编程(三)(HTTP)

gitee仓库&#xff1a;https://gitee.com/WangZihao64/linux/tree/master/CalTcp 一、重谈协议 协议是一种“约定”&#xff0c;这种约定是双方都知道的。有了一致的约定&#xff0c;双方才能够正常地进行通信。协议在网络的第一篇博客中也提到过&#xff0c;协议是双方进行通…

uniapp中H5定位功能实现

1.要实现该功能 必须使用vue-jsonp进行跨域 JSONP是一种跨域数据请求的解决方案&#xff0c;它使用script元素来请求数据&#xff0c;再利用回调函数将数据传回页面。 Vue框架提供了对JSONP的支持&#xff0c;可以方便地在Vue应用中使用JSONP获取跨域数据。下面我们来了解一下…

【Java】StringBuffer和StringBuilder

共同点 他们都是可变的&#xff0c;在每次进行修改操作时&#xff0c;都不会产生新的对象&#xff0c;所以在进行修改的时候&#xff0c;尽量使用这两种类型的字符串 不同点 StringBuffer在单线程中效率高 StringBuilder用于多线程确保安全性 测试代码 public class test …

keepalived安装配置详解

文章目录 高可用介绍keepalived安装、使用vip漂移抓包脑裂脑裂有没有危害&#xff1f;如果有危害对业务有什么影响&#xff1f; keepalived架构双vip架构 Healthcheck实现 notifyVRRP选举格式 高可用 介绍 高可用性&#xff08;High Availability&#xff09;是指系统或服务能…

Linux的locale本地化配置

Linux的locale本地化配置 locale简介localectl常用操作语言环境键盘布局 常见问题:配置语言环境报错Linux系统locale(UTF-8)报错最小化自动安装的Centos7修改完整中文显示 locale简介 参考: http://m.blog.chinaunix.net/uid-20621049-id-3427444.html locale把按照所涉及到的…

Python调用ImageMagick生成PDF文件缩略图

使用Python调用ImageMagick生成PDF文件缩略图 Imagemagick使用Ghostscript作为其依赖项之一&#xff0c;以便能够处理和转换PDF相关的图像。 准备 安装Ghostscript&#xff0c;网站安装ImageMagick&#xff0c;网站 安装完毕后&#xff0c;需要自行配置环境路径 脚本 使用示…

灌区信息化智能测控一体化闸门系统解决方案

一、方案背景 闸门是节水灌溉工程中重要组成部分。在农田灌区中&#xff0c;一方面存在传统手摇闸门&#xff0c;未能实现自动化、数字化&#xff0c;另一方面部分灌区闸站虽然部分实现了自动化控制&#xff0c;但是由于闸站较多&#xff0c;有些位置较为偏僻&#xff0c;部分水…

网络数据安全风险评估实施指引(一)

近日&#xff0c;全国信息安全标准化技术委员会发布了《网络安全标准实践指南 网络数据安全风险评估实施指引》&#xff08;TC260-PG-20231A v1.0-202305&#xff09;&#xff0c;旨在响应《数据安全法》要求&#xff0c;落实重要数据处理过程风险评估&#xff0c;衔接已发布的…

前端开发中的微服务架构设计

前端服务化和小程序容器技术为前端应用带来了更好的组织结构、可维护性和可扩展性。这些技术的应用将促进前端开发的创新和发展&#xff0c;使团队能够更好地应对复杂的前端需求和业务挑战。通过将前端视为一个服务化的架构&#xff0c;我们能够构建出更强大、可靠且可持续的前…

OpenCv (C++) 使用矩形 Rect 覆盖图像中某个区域

文章目录 1. 使用矩形将图像中某个区域置为黑色2. cv::Rect 类介绍 1. 使用矩形将图像中某个区域置为黑色 推荐参考博客&#xff1a;OpenCV实现将任意形状ROI区域置黑&#xff08;多边形区域置黑&#xff09; 比较常用的是使用 Rect 矩形实现该功能&#xff0c;代码如下&…

vmware-ubuntu 出现的奇怪问题

虚拟机突然连不上网 参考博文-CSDN-卍一十二画卍&#xff08;作者&#xff09;-Vmware虚拟机突然连接不上网络【方案集合】 sudo vim /var/lib/NetworkManager/NetworkManager.statesudo service network-manager stop sudo vim /var/lib/NetworkManager/NetworkManager.stat…

华为云子网路由表作用及价值

子网路由表 子网路由表作用云专线、VPN的配置与子网路由表强关联&#xff0c;本质是在相应的子网路由表中添加了一条路由Nat路由表问题地址变更问题snat和dnat 子网路由表作用 子网内部作为一个二层网络&#xff0c;通过mac地址互通&#xff0c;不通过路由互通。跨子网&#x…

Java Vue物联网系统

一个简单易用的物联网平台&#xff0c;可用于搭建物联网平台以及二次开发和学习。适用于智能家居、智慧办公、智慧社区、农业监测、水利监测、工业控制等。 系统后端采用Spring boot&#xff1b;前端采用Vue&#xff1b;消息服务器采用EMQX&#xff1b; 技术栈 服务端相关技术…

Vector - CANoe - DoIP在CANoe应用

目录 背景说明 一、DoIP通信说明 1、连接(Connection) 2、车辆发现(Vehicle Discovery)

第一阶段-第八章 Python的文件操作

目录 一、文件的编码  1.学习目标  2.文件编码  3.查看文件编码  4.本小节的总结 二、文件的读取  1.学习目标  2.什么是文件  3.文件包含的操作&#xff08;打开、关闭、读、写&#xff09;  4.文件的操作步骤&#xff08;打开或创建文件open&#xff08;mode…

【计算机视觉 | 目标检测 | 图像分割】arxiv 计算机视觉关于目标检测和图像分割的学术速递(7 月 14 日论文合集)

文章目录 一、检测相关(6篇)1.1 LVLane: Deep Learning for Lane Detection and Classification in Challenging Conditions1.2 Garbage in, garbage out: Zero-shot detection of crime using Large Language Models1.3 Robotic surface exploration with vision and tactile …