Vue3 + Element Plus项目el-table表格里使用el-switch开关按钮效果

期望结果:

在这里插入图片描述

表格中组件:

在开关外层用插槽包裹,里面写v-model用来绑定字段

        <!--用插槽包裹el-switch开关-->
        <template #default="scope">
          <el-switch active-text="启用" :active-value=1 active-color="#2fa1f1" inactive-text="停用" :inactive-value=0 inactive-color="#9c9c9c" v-model="scope.row.tradingVolumeStatus" @change="handleStatusChange(scope.row)"/> <!--当tradingVolumeStatus=1时switch开启,当tradingVolumeStatus=0时switch关闭-->
        </template><!--回显的时候 int类型使用 :active-value,字符串类型不加引号-->
1、绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。

2、使用active-text属性与inactive-text属性来设置开关的文字描述。

3、设置active-value和inactive-value属性,接受Boolean, String或Number类型的值。

绑定事件

function handleStatusChange(row) {
  
  console.log("====="+row);
}

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

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

相关文章

快捷键专栏 IDEA、Navicat、电脑、Excle、Word等

标题 电脑篇windowsR 配合以下常用命令连上公司网线WiFi速度变慢问题解决Windows10 设置鼠标右键在此处打开cmd和Powershell窗口、关机打开电脑诊断工具系统设置常用设置查看电脑出场日期 systeminfo删除文件显示已在另一个程序打开&#xff1f;找回回收站删除的文件WindowsR输…

如何用Pycharm把python代码打包成exe文件

在terminal 里面输入pyinstaller --onefile --noconsole chuli_v2.py –noconsole 这个选项会生成一个不带控制台窗口的 .exe 文件

STM32微控制器库指南:函数特性、应用范围与实践

在嵌入式系统的设计和开发中&#xff0c;STM32系列微控制器因其卓越的处理能力和多样的外设选项而广受推崇。STM32库函数作为开发流程中不可或缺的工具&#xff0c;扮演着至关重要的角色。本文将详细阐述STM32库函数的主要特性、应用场景及其在实际开发中的应用实例。 什么是ST…

记录一下:vue3+antd-vue a-form包含a-table实现表格行内校验, 清除 指定行 指定字段 的校验

问题描述下&#xff1a; 目标VLAN值可以输入&#xff0c; 也可以点击后面的按钮进行弹窗选择。由于检验原因&#xff0c;光标失焦但是没有填写就会校验爆红&#xff0c;然后点击选择之后由于没有失焦过程没有触发校验&#xff0c;依然还是红的。这个时候就需要清除 目标VLAN值 …

推荐网站(22)GeoSpy,根据图片显示地理位置

今天推荐一款名为GeoSpy的AI工具。它利用人工智能技术&#xff0c;通过分析照片中的光线、植被、建筑风格等细节线索&#xff0c;实现对拍摄地点的精确定位。令人难以置信的是,它对位置的定位准确度非常高。 GeoSpy之所以智能如此,是因为它将输入的照片与大量的街景和地理图像…

getDay 与 getUTCDay 本质区别

背景 我在做这个实验的时候是北京时间&#xff1a;2024年6月12日 下午16&#xff1a;32分许 研究方向 本文探讨 getDay 与 getUTCDay 本质区别 测试用例 如果你现在的时区设置的是 &#xff08;UTC08:00&#xff09; 北京&#xff0c;重庆&#xff0c;香港特别行政区&#x…

零空间(Null Space)控制例子

零空间(Null Space)控制是一种用于多任务控制系统的技术,特别适用于机器人和多自由度系统。其基本原理是将控制任务分解为不同的优先级,其中高优先级任务在主空间(Task Space)中执行,而低优先级任务在零空间(Null Space)中执行。这样可以保证在完成主要任务的同时,次…

中仕公考:博士考公务员能免笔试吗?

博士学历的考生&#xff0c;无论是选择报考公务员还是事业单位&#xff0c;都必须经过正规的选拔过程。根据当前规定&#xff0c;所有体制内职位均须通过相应的考试方可入职&#xff0c;除非考生在高考时已选定定向招聘岗位。 博士毕业生如果想成为公务员&#xff0c;必须参加…

有哪些ai聊天推荐?简单分享三款

有哪些ai聊天推荐&#xff1f;在当今数字化时代&#xff0c;人工智能&#xff08;AI&#xff09;聊天软件已经成为我们日常生活中不可或缺的一部分。无论是与朋友、家人还是同事交流&#xff0c;这些智能聊天软件都能为我们提供极大的便利。那么&#xff0c;市面上有哪些值得推…

keil测量代码执行时间

文章目录 前言背景二、使用步骤软件模拟仿真连接实物在线仿真使用代码来计算某个模块或函数等的运行时间 总结 前言 本文参考了KEIL 下如何准确测量代码执行时间&#xff1f;与正点原子的STM32F1开发指南-寄存器版本_V3.3.pdf 提示&#xff1a;以下是本篇文章正文内容&#xf…

Spring Boot + Mybatis Plus实现登录注册

Spring Boot 实现登录注册 1. 注册 业务逻辑 客户端输入注册时需要的用户参数&#xff0c;比如&#xff1a;账户名、密码、确认密码、其他服务端接收到客户端的请求参数进行校验&#xff0c;然后判断是否有误&#xff0c;有误的地方就将错误信息抛出将密码进行加密之后存储到…

全新抖音快手小红书视频解析去水印系统网站源码

这个系统支持几十种平台&#xff0c;包括抖音、快手小红书以及其他热门社交媒体平台。它可以帮助轻松地下载这些平台上的任何视频&#xff0c;并去除其中的水印&#xff0c;让你可以自由地保存和分享这些视频。 使用方法&#xff1a; 上传压缩包解压&#xff0c;网站信息在inc…

实验演示方波是由正弦波叠加而成的

方波可以看成是由N个正弦波叠加而成&#xff0c;在数学上&#xff0c;方波可以写成这个式子&#xff0c;大家可以看到这个式子里面包含了无数个奇数次的正弦波。 下面通过运放构成的反相求和电路来看一下&#xff0c;正弦波叠加成方波 对于这个反相求和电路&#xff1a; Ui1是…

深度学习Day-20:DenseNet算法实战 乳腺癌识别

&#x1f368; 本文为&#xff1a;[&#x1f517;365天深度学习训练营] 中的学习记录博客 &#x1f356; 原作者&#xff1a;[K同学啊 | 接辅导、项目定制] 一、 基础配置 语言环境&#xff1a;Python3.8编译器选择&#xff1a;Pycharm深度学习环境&#xff1a; torch1.12.1c…

【全开源】Java 白色陪玩高端小程序源码陪练APP源码H5公众号源码电竞系统比心源码

&#x1f3ae;游戏陪玩白色高端小程序&#xff1a;你的专属游戏伙伴 &#x1f389;一、引言&#xff1a;游戏不再孤单 你是否曾在游戏中感到孤单&#xff0c;或是想寻找一个能够与你并肩作战的伙伴&#xff1f;现在&#xff0c;有了这款“游戏陪玩白色高端小程序”&#xff0…

Yapi代码执行 waf绕过实战记录

本文记录了2021年一次有趣的客户目标测试实战。这次经历颇为特别&#xff0c;因此我将其整理成笔记&#xff0c;并在此分享&#xff0c;希望对大家有所帮助。 事件起因 疫情在家办公&#xff0c;准备开始划水的一天&#xff0c;这时接到 boss 的电话说要做项目&#xff0c;老…

3D培训大师:深度沉浸式学习,筑牢基建安全防线

基建行业作为国家发展的基石&#xff0c;横跨公共事业、交通运输、水利环境等核心领域&#xff0c;施工现场的安全保障至关重要。这不仅是为了锤炼员工精湛的操作技能&#xff0c;更是为了提升每一位员工的安全意识&#xff0c;确保他们在复杂的工程环境中游刃有余&#xff0c;…

【Ardiuno】实验使用ESP32单片机实现高级web服务器暂时动态图表功能(图文)

接下来&#xff0c;我们继续实验示例代码中的Wifi“高级web服务器”&#xff0c;配置相关的无线密码后&#xff0c;开始实验 #include <WiFi.h> #include <WiFiClient.h> #include <WebServer.h> #include <ESPmDNS.h>const char *ssid "XIAOFE…

总负债50万,32万网贷已还清,征信花了,多久才能养好?

​近年来&#xff0c;我国网贷市场如同春天的竹笋&#xff0c;一夜间冒出无数。不论企业资质如何&#xff0c;都纷纷涉足网贷领域&#xff0c;导致网贷乱象丛生。在如此环境下&#xff0c;借钱变得轻而易举&#xff0c;门槛低得让人难以置信&#xff0c;许多人一缺钱就想到网贷…

使用CSS、JavaScript、jQuery三种方式实现手风琴效果

手风琴效果有不少&#xff0c;王者荣耀官网&#xff08;源网址 https://pvp.qq.com/raiders/ &#xff09;有一处周免英雄&#xff0c;使用的就是手风琴效果&#xff0c;如图所示。 我试着用css、js、jQuery三种方式实现了这种效果&#xff0c;最终效果差不多&#xff0c;美中不…