当前位置: 首页 > news >正文

ElementUI 的组件 Switch(开关)如何让文字显示在按钮上

效果图:

一、引入switch组件

给组件自定义一个类:tableScopeSwitch,设置开关的值和对应展示的文字(开为 1,并展示启用;关为 0,并展示禁用)。

<div class="tableScopeSwitchBox">  <el-switchclass="tableScopeSwitch":active-value="1":inactive-value="0"@change="handleStatusChange(scope.$index, scope.row)"active-text="启用"inactive-text="禁用"v-model="scope.row.status"></el-switch>
</div

二、自定义样式

<style lang="scss" scoped>
/deep/.tableScopeSwitchBox .tableScopeSwitch .el-switch__label {position: absolute;display: none;color: #fff;
}/*打开时文字位置设置*/
/deep/.tableScopeSwitchBox .tableScopeSwitch .el-switch__label--right {z-index: 1;right: 6px;
}/*关闭时文字位置设置*/
/deep/.tableScopeSwitchBox .tableScopeSwitch .el-switch__label--left {z-index: 1;left: 6px;
}/*显示文字*/
/deep/.tableScopeSwitchBox .tableScopeSwitch .el-switch__label.is-active {display: block;text-align: center;
}/*开关按钮的宽度大小*/
/deep/.tableScopeSwitchBox .tableScopeSwitch.el-switch .el-switch__core,
/deep/.tableScopeSwitchBox .el-switch .el-switch__label {width: 60px !important;
}
</style>

相关文章:

ElementUI 的组件 Switch(开关)如何让文字显示在按钮上

效果图&#xff1a; 一、引入switch组件 给组件自定义一个类&#xff1a;tableScopeSwitch&#xff0c;设置开关的值和对应展示的文字&#xff08;开为 1&#xff0c;并展示启用&#xff1b;关为 0&#xff0c;并展示禁用&#xff09;。 <div class"tableScopeSwitch…...

Redis常用的五种数据结构详解

一、Redis 数据库介绍 Redis 是一种键值&#xff08;Key-Value&#xff09;数据库。相对于关系型数据库&#xff08;比如 MySQL&#xff09;&#xff0c;Redis 也被叫作非关系型数据库。 像 MySQL 这样的关系型数据库&#xff0c;表的结构比较复杂&#xff0c;会包含很多字段&…...

stm32 CubeMx 实现SD卡/sd nand FATFS读写测试

文章目录 stm32 CubeMx 实现SD卡/SD nand FATFS读写测试 1. 前言 2. 环境介绍 2.1 软硬件说明 2.2 外设原理图 3. 工程搭建 3.1 CubeMx 配置 3.2 SDIO时钟配置说明 3.2 读写测试 3.2.1 添加读写测试代码 3.3 FATFS文件操作 3.3.1 修改读写测试代码 3.4 配置问题记…...

【Unity】 HTFramework框架(六十)Assistant助手(在Unity中接入DeepSeek等AI语言大模型)

更新日期&#xff1a;2025年2月14日。 Github源码&#xff1a;[点我获取源码] Gitee源码&#xff1a;[点我获取源码] 索引 Assistant助手安装Ollama使用Assistant&#xff08;在编辑器中&#xff09;打开Assistant配置Assistant使用Assistant处理Assistant回复的内容使用推理大…...

web自动化笔记(二)

文章目录 一、参数化测试1.pytest命令2.实现参数化测试3.填写地址测试4.生成Allure测试报告5.关键字驱动 二、案例1.实现后台登录1.1登录1.2.处理验证码1.3.封装识别验证码函数 2.通过cookie保持登录2.1给页面添加cookie2.2获取页面的cookie2.3自动化获取cookie 三、excel进行数…...

IIS部署netcore程序后,出现500.30错误解决方案之一

netcore程序部署到IIS后一直出现错误&#xff0c;访问首页后会跳转到登录页地址&#xff0c;然后看到如下错误 HTTP Error 500.30 - ANCM In-Process Start Failure Common solutions to this issue: The application failed to start The application started but then stopp…...

spring 学习(spring-Dl补充(注入不同类型的数据))

前言 在之前的案例&#xff0c;列举的最多的是注入 对象。本篇博客则是补充说我们不仅可以注入对象 还可以注入其他的数据类型包括基本数据类型&#xff0c;引用数据类型。 注入基本数据类型 常见的基本数据类型有&#xff1a;short char int long float double boolean …...

Docker Desktop之Nginx

安装Nginx 把这个复制 到docker 中执行 即可...

利用ffplay播放udp组播视频流

ffplay -fs -fflags nobuffer -flags low_delay -analyzeduration 0 -probesize 32 -framedrop -sync ext -strict experimental udp://224.1.1.1:5001 -fs : 全屏显示 -fflags nobuffer &#xff1a; 禁用输入缓冲&#xff08;减少100-200ms缓冲延迟&#xff09; -an…...

【教程】MySQL数据库学习笔记(七)——多表操作(持续更新)

写在前面&#xff1a; 如果文章对你有帮助&#xff0c;记得点赞关注加收藏一波&#xff0c;利于以后需要的时候复习&#xff0c;多谢支持&#xff01; 【MySQL数据库学习】系列文章 第一章 《认识与环境搭建》 第二章 《数据类型》 第三章 《数据定义语言DDL》 第四章 《数据操…...

2025.2.14——1400

2025.2.14——1400 A 1400 B 1400 C 1400 D 1400 E 1400 F 1400 G 1400 H 1400 ------------------------------------------------ 思维排序/双指针/二分/队列匹配思维二分/位运算思维数学思维 A 一眼想到的是维护信息计数。维护两个信息同时用长的一半去找短的一半…...

DeepSeek教unity------MessagePack-04

Union 联合 MessagePack for C# 支持序列化接口类型和抽象类类型的对象。它的行为类似于 XmlInclude 或 ProtoInclude。在 MessagePack for C# 中&#xff0c;这些被称为Union。只有接口和抽象类可以被 Union 属性注解。需要唯一的联合键。 /******************************…...

Java异常体系深度解析:从Exception到Error

文章目录 前言一、Java异常体系概览ExceptionError 二、受检异常与非受检异常受检异常&#xff08;Checked Exception&#xff09;非受检异常&#xff08;Unchecked Exception&#xff09; 三、常见的Error类型四、异常处理机制try-catch-finally结构Throws关键字 五、自定义异…...

【linux】文件与目录命令 - ln

文章目录 1. 基本用法2. 常用参数3. 用法举例4. 注意事项 ln 命令用于在文件系统中创建硬链接或符号链接&#xff08;软链接&#xff09;&#xff0c;是文件共享和路径引用的常用工具。 1. 基本用法 语法&#xff1a; ln [选项] 源文件 [目标文件/目标目录]功能&#xff1a; 创…...

Xilinx kintex-7系列 FPGA支持PCIe 3.0 吗?

Xilinx kintex-7系列资源如下图 Xilinx各系列的GT资源类型和性能 PCIe Gen1/2/3的传输速率对比 K7上面使用的高速收发器GTX最高速率为12.5GT/s&#xff0c; PCIe Gen2 每个通道的传输速率为 5 GT/s。 PCIe Gen3 每个通道的传输速率为 8 GT/s。 所以理论上硬件支持PCIe3.0&#…...

无人机遥感技术在农业中的具体应用:株数和株高、冠层覆盖度、作物倒伏检测、叶面积指数、病虫害监测、产量估算、空间数据综合制图

近年来&#xff0c;随着无人机技术的飞速发展&#xff0c;其在智慧农业领域的应用越来越广泛。无人机遥感作为一种高效的空间大数据获取手段&#xff0c;能够为农业生产提供多时相、多维度、大面积的农情信息&#xff0c;为实现精准农业和智慧农业提供了有力支持。今天&#xf…...

前端框架React知识回顾

首先&#xff0c;得确定用户的需求&#xff0c;可能是一个准备面试的前端开发者&#xff0c;想要系统复习React相关知识点。接下来要考虑React的核心概念&#xff0c;比如组件、生命周期、Hooks这些肯定是必须的。然后&#xff0c;面试中常问的问题&#xff0c;比如虚拟DOM、状…...

坑多多之ac8257 i2c1 rtc-pcf8563

pcf85163 ordering information Ordering information Package Description Version Marking code PCF85163T/1 SO8 ① SOT96-1 PF85163 PCF85163TS/1 TSSOP8 ② SOT505-1 85163 ①plastic small outline package; 8 leads;body width 3.9 mm ②plastic thin…...

webpack构建流程

文章目录 [TOC](文章目录) 运行流程初始化流程编译构建流程compile编译make 编译模块build module 完成模块编译 输出流程seal输出资源emit输出完成 小结 运行流程 是一个串行的过程&#xff0c;它的工作流程就是将各个插件串联起来 在运行过程中会广播事件&#xff0c;插件只…...

React - 组件之props属性

在 React 中&#xff0c;props&#xff08;即属性&#xff09;是组件之间传递数据的一种方式。它是 React 组件的基础&#xff0c;用于将数据从父组件传递到子组件。 一、类组件中 1. props 的作用 数据传递: props 允许父组件向子组件传递数据。子组件可以使用这些数据来渲…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...