ElementPlus Switch 开关基础使用

news2024/11/14 2:17:16

昨天开发用到开关组件  后台返回字段是 can_write 默认是0 or 1 但是Switch 组件绑定的默认值默认是 true or false   直接绑定会导致默认是关闭状态 在页面一加载 值发生变化时 会自己调用 查了文档  需要使用  active-value 和 inactive-value    来指定绑定的数据类型       

  inactive-value  默认值

  active-value 选中切换值

完整代码 以及它附带的事件名称

   <el-switch active-value="1" inactive-value="0"  
         style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"  
         v-if="scope.row.type == 1" 
        v-model="scope.row.can_write" @change="handleSwitchChange(scope.row)" />

设置开关的宽度:
<el-switch v-model="switchValue" width="100px" />

设置开关的颜色:
<el-switch v-model="switchValue" active-color="#13ce66" inactive-color="#ff4949" />

禁用开关:
<el-switch v-model="switchValue" :disabled="true" />

自定义开关的文本:
<el-switch v-model="switchValue" active-text="开启" inactive-text="关闭" />
 

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

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

相关文章

C#,工业化软件与院校软件的对比及编程语言的选择建议

飞机发动之之一&#xff0c;涡轮喷气航空发动机&#xff08;JET ENGINE&#xff09; 火箭发动机之一&#xff0c;俄罗斯RD-180煤油和液氧发动机&#xff08;ROCKET ENGINE&#xff09; 1 飞机发动机与火箭发动机的简明对比 2 工业软件与院校软件的简单对比 除了以上类似的对比…

【java学习】方法的参数传递(21)

文章目录 相关概念1. 方法传递之基本数据类型2. 方法的参数传递之引用对象3. 总结 相关概念 方法&#xff0c;必须有其所在类或对象调用才有意义。若方法含有参数&#xff1a; 形参&#xff1a;方法声明时的参数 实参&#xff1a;方法调用时实际传给形参的参数值 问题&#xf…

数据建模设计

数据库系统——建模与设计 一、数据建模 数据库的设计不仅需要处理规则的理解&#xff0c;更重要的是数据需求的理解与表达。 表达计算机世界的模型称为数据模型&#xff0c;而表达信息世界的模型称为概念模型。抽象是具有层次的&#xff0c;将现实世界的问题抽象成概念模型…

[ValueError: not enough values to unpack (expected 3, got 2)]

项目场景&#xff1a; 在使用opencv进行关键点识别、边缘轮廓提取的时候&#xff0c;提示以上错误。 import cv2 import numpy as npdef preprocess(image):# 进行图像预处理&#xff08;例如灰度化、高斯模糊等&#xff09;gray cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)blu…

Vuex的使用,详细易懂

目录 一.前言 二.Vuex的简介 三.vuex的使用 3.1 安装Vuex 3.2 使用Vuex的步骤&#xff1a; 四.vuex的存值取值&#xff08;改变值&#xff09; 五.vuex的异步请求 好啦&#xff0c;今天的分享就到这啦&#xff01;&#xff01;&#xff01; 一.前言 今天我们继续前面的E…

openGauss Meetup(天津站.10月13日),欢迎报名

由openGauss社区、天开发展集团、天津市软件行业协会、天大智图&#xff08;科技&#xff09;有限公司联合主办,天津鲲鹏生态创新中心、天津市计算机学会、天津市人工智能学会、天津市系统集成协会、麒麟软件有限公司、天津南大通用数据技术股份有限公司、AI知学社协办的“open…

【Vuex+ElementUI】Vuex中取值存值以及异步加载的使用

一、导言 1、引言 Vuex是一个用于Vue.js应用程序的状态管理模式和库。它建立在Vue.js的响应式系统之上&#xff0c;提供了一种集中管理应用程序状态的方式。使用Vuex&#xff0c;您可以将应用程序的状态存储在一个单一的位置&#xff08;即“存储”&#xff09;中&#xff0c;…

北斗高精度定位为无人车成为机场运营新常态提供技术保障

在现代快节奏的生活中&#xff0c;人们对交通效率和安全性的需求越来越高。为了满足这一需求&#xff0c;无人驾驶技术被广泛研究和应用。而随着北斗卫星系统的发展&#xff0c;机场无人车正成为潜在的未来运输解决方案。本文将深入探讨北斗卫星如何改变机场运营&#xff0c;以…

Vega Prime入门教程14.01:调用VAPS XT DLL

本文首发于&#xff1a;Vega Prime入门教程14.01&#xff1a;调用VAPS XT DLL 在VAPS XT系列教程中提到过Vega Prime可以直接调用Drawing Integration生成的dll&#xff0c;本文来测试这个功能效果。 本系列使用的是VP18.0&#xff0c;使用的是VC14.0&#xff08;VS2015&…

java装箱和拆箱

package daysreplace;import com.sun.jdi.IntegerValue;import java.util.Arrays;public class Test {public static void main(String[] args) {//装箱&#xff1a;自动将基本数据类型转成包装类 基本数据类型->包装类型//拆箱&#xff1a;自动将包装类转成基本数据类型 包…

【LeetCode:2512. 奖励最顶尖的 K 名学生 | 模拟+哈希表+堆】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

练[GYCTF2020]EasyThinking

[GYCTF2020]EasyThinking 文章目录 [GYCTF2020]EasyThinking掌握知识解题思路还得靠大佬正式开始 关键paylaod 掌握知识 ​ thinkphpV6任意文件操作漏洞&#xff0c;代码分析写入session文件的参数&#xff0c;源码泄露&#xff0c;使用蚁剑插件disable_functions绕过终端无回…

Android Native 开发 要点实录

Android Studio 中写 C 代码 android studio创建C项目_android studio native c-CSDN博客 项目配置参考 【CMake】CMakeLists.txt的超傻瓜手把手教程&#xff08;附实例源码&#xff09;_【cmake】cmakelists.txt的超傻瓜手把手教程(附实例源码)-CSDN博客 CMakeLists.txt 讲解…

一文区分路由策略和策略路由!

一、路由策略 在复杂的数据通信网络中&#xff0c;根据实际组网需求&#xff0c;往往需要实施一些路由策略对路由信息进行过滤、属性设置等操作&#xff0c;通过对路由的控制&#xff0c;可以影响数据流量转发。路由策略并非单一的技术或者协议&#xff0c;而是一个技术专题或…

MongoDB——centOS7环境Mongodb权限管理(图解版)

目录 一、MongDB权限概述1.1、MongDB权限概述1.2、MongDB权限列表 二、Mongodb权限管理示例2.1、创建账号2.1.1、创建管理员用户2.1.2、开启认证2.1.3、创建普通账号 一、MongDB权限概述 1.1、MongDB权限概述 mongodb是没有默认管理员账号&#xff0c;所以要先添加管理员账号…

界面组件DevExpress WPF v23.1 - 进一步升级数据处理能力

DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序&#xff0c;这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 无论是Office办公软件…

帝国cms改目录后打不开,帝国cms改目录生成后还是404

帝国CMS更改了网站域名或者栏目目录地址信息打不开的解决方法&#xff0c;一起来看看吧&#xff1a; 很多的小伙伴们&#xff0c;改了后台的系统设置里面的网站地址或者栏目目录地址&#xff0c;信息页就打不开的解决方法如下&#xff1a; 后台>系统>数据更新>更新信…

防雷排插的防雷应用以及解决方案

防雷排插是一种能够有效防止雷电对电器设备造成损坏的电源插座。防雷排插的应用&#xff0c;原理和作用如下&#xff1a; 地凯科技防雷排插的应用&#xff1a;防雷排插主要用于保护电脑&#xff0c;电视&#xff0c;音响等电子设备免受雷击或者电网过压的影响。防雷排插通常有…

Delphi如何为Win32位和Win64位不同的目标平台分别编译生成不同文件名的EXE可执行文件

实际上就是给编译生成的exe文件自动重命名不同的名称&#xff1a; 实测《Z-Gantt时间管理进度计划甘特图》Delphi 10.3.3 成功&#xff0c;网上说Delphi xe3 以上版本都可以&#xff0c; delphi 7 不可以。 进入 Project Options - Build Events &#xff0c; 然后在 post-bui…

华为云云耀云服务器L实例评测 | 实例评测使用之硬件参数评测:华为云云耀云服务器下的 Linux 磁盘目录分析神器 ncdu

华为云云耀云服务器L实例评测 &#xff5c; 实例评测使用之硬件参数评测&#xff1a;华为云云耀云服务器下的 Linux 磁盘目录分析神器 ncdu 介绍华为云云耀云服务器 华为云云耀云服务器 &#xff08;目前已经全新升级为 华为云云耀云服务器L实例&#xff09; 华为云云耀云服务器…