Vue+Element-ui中el-switch组件，改变数据状态且初始化

已于 2024-05-22 10:12:15 修改
阅读量1.1w 收藏 6
点赞数 3
分类专栏： Vue技术栈 文章标签： el-switch插件 el-switch插件改变数据类型
于 2019-10-23 15:58:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41346436/article/details/102700912
版权
本文介绍了在Vue+Element UI应用中遇到el-switch组件数据更新但开关状态未随之改变的问题。解决方法是确保数据与开关状态同步，并在编辑时初始化按钮状态。关键在于将el-switch的active-value和inactive-value设置为String类型，以匹配请求数据的类型。同时强调在请求数据前进行数据类型转换和初始化的重要性。
摘要由CSDN通过智能技术生成

el-switch使用过程中，通过触发开关按钮，数据更改成功，但是按钮一直是默认的一种状态，因此需要数据和开关状态同时改变，所以每次操作对应的信息时要初始化按钮开光状态。

以下是效果图
在这里插入图片描述
此处是一个el-dialog真的弹出框，此处省略与本要点无关的代码，只放el-switch的相关代码，此处的data04.Content是请求数据所传的值，用CusData 代替data04.Content，而data04.Content中包括了开关按钮需要改变的数据字段IsOutOfContact
在这里插入图片描述

<el-dialog :title="dialogParams02.title" :visible.sync="dialogParams02.visible" :close-on-click-modal="false" :top="'15
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Vue3 - Element Plus 开关组件 el-switch 首次加载或刷新页面时出现“自动执行一次change事件“问题，Switch开关初次加载会自动触发change，无法将值设为布尔值！
王佳斌
07-31 5341
vue3，elementPlus，组件库，开关，el-switch，组件，Switch开关，change事件，switch 状态发生变化时的回调函数，第一次就触发，就首次加载的时候触发一次，自动就执行了一次change，如何解决这个问题，把值改成true和false也不行，boolean布尔值，数值型，无法保证 v-model 是布尔值(true/false)，但又不能在里面写表达式怎么办，初次加载会自动执行change事件，第一次会加载或刷新会触发change的解决办法，三元表达式，表格table，还是不
Vue3 + Vite+ Element-Plus + TypeScript 搭建系统
weixin_45044818的博客
12-04 1493
一种新的专门的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏览器的兼容问题，让CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多好处。创建 variables.scss 变量文件，注意规范变量以 $ 开头 @styles/variables.scss。上面导出的scss全局变量在ts不生效的，需要创建一个以.module.scss 结尾的文件。添加scss @styles/normalize.scss。vite导入variables.scss。
element ui switch开关 点击按钮后，弹窗确认再改变开关状态
热门推荐
ymumi的博客
11-14 2万+
<el-switch v-model="autoUpdate" active-color="#5eb058" inactive-color="#cccccc" disabled @click.native="handleUpdate(autoUpdate)"> </el-switch> ...
vue + elementUI ＜el-switch＞弹窗改变状态
莫小文的博客
10-30 1422
实现效果 代码 <template> <div class="app"> <el-switch v-model="value" active-text="否" active-color="#ff4949 " inactive-text="是" inactive-color="#13ce66" disabled @click.native="changeSwitch" /&g
elementui组件库的switch数值类型使用
最新发布
weixin_52236586的博客
10-10 128
【代码】elementui组件库的switch数值类型使用。
el-switch修改状态
qq_57076435的博客
08-20 249
【代码】el-switch修改状态。
解决Element组件el-switch在Vue中值的绑定与回显问题
N201871643的博客
05-28 2668
1. 定义与功能el-switch是Element UI提供的一个开关组件，它可以在两种状态之间切换，通常用于表示布尔值的选择。该组件支持自定义样式，可以轻松地集成到各种布局和主题中。2. 常用属性- value：绑定的值，用于控制开关的状态。- disabled：是否禁用开关。- name：开关的名称，用于辅助设备读屏。3. 事件- change：当开关状态改变时触发的事件。
elementUI的el-switch的使用
m0_46581222的博客
09-08 1万+
工作记录 背景：el-switch绑定值的问题 第一种： v-model绑定布尔值 <template> <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch> </template> <script> export default { name: "hom
vue-element-switch用法
Tel_17674647975的博客
10-20 1020
新学习的内容知识，自己记录下
vue2+element ui
qq_25451199的博客
06-24 2119
后端人后开发前端vue。记录一下。 git地址：https://github.com/1065744299/vue-elment-ui 这个demo主要用到vue、vueRouter、vueX、element UI、echarts等技术。主要以展示怎么使用为主。主要的功能有登录、路由、store、报表、导出等。 这里用vue的多页面功能，为了组件的重复使用。 开始介绍代码： 为了打包的时候直打包一...
Vue+Element UI 向Table组建中的每一行添加一个switch组件，实现每一行单独控制及其踩坑
weixin_48371382的博客
04-21 882
<el-table :border="true" :data="tableData" style="width: 500px;margin:0 auto;"> <el-table-column label="视频开关"> <template slot-scope="scope"> <el-switch active-text=..
element-ui中的switch组件的使用
m0_66318917的博客
01-06 1621
场景：当我们想根据表格中的数据来判断和绑定switch组件，绑定的值需要转换成boolean类型的值。`组件的属性，用于定义开关激活状态和非激活状态的值。如果你希望开关的状态值是其他类型，可以使用。进行相应的转换，并更新对应行的数据对象中的。设置为1，表示开关激活时的值为1；设置为0，表示开关非激活时的值为0。这样，当用户在开关上操作时，开关的。在上述示例中，我们将。
ElementUI el-switch 使用详解
繁依Fanyi的博客
08-15 2408
除了通过和设置颜色外，el-switch 还允许我们通过 CSS 自定义更多的样式。<template><el-switch<style></style>通过自定义 CSS 样式，我们可以灵活地调整 el-switch 的外观，以满足不同的设计需求。在这篇文章中，我们详细介绍了 ElementUI 的 el-switch 组件，从基本用法到高级应用，以及其背后的实现原理。el-switch 组件以其简洁美观的设计和丰富的配置选项，为开发者提供了一个灵活的布尔值切换方案。
vue element-ui列表中el-switch 开关
冰冰酱
03-12 4600
一.需求说明 1、根据后台传值动态显示开关（0为关，1为开） 2、对开关进行操作时请求后台，需要传两个参数：ID，State 二.需求描述 在列表的每一条添加一个开关，可以改当前一条数据的状态，并发送到服务端，并根据服务端返回的结果局部刷新当前一条数据 三.期望结果 已读和未读是后端返回给我的状态，分别是1和2，我先点击switch发送给后端这条数据的id，然后修改这一条数据的状态，而不是重新拿这个列表，如果后端返回失败的情况这个switch不做改变 四.解决方法 1.表格中组件
Vue 开关组件 (ELSwitch) 组件
Anonymous996的博客
07-16 4632
对于element-ui 中switch 不支持promise异步操作这件事。
el-switch 状态转换
weixin_50885665的博客
02-27 478
【代码】el-switch 状态转换。
element中el-switch用法汇总（拓展：el-switch开关点击弹出确认框时，状态先改变，点击确认/取消失效，怎么解决?）
甜心的专栏
11-08 6733
element中el-switch用法汇总（拓展：el-switch开关点击弹出确认框时，状态先改变，点击确认/取消失效，怎么解决?）
Vue+Element(el-switch的使用)+springboot
一只猫
01-22 770
【代码】Vue+Element(el-switch的使用)+springboot。
elementUI表格中使用switch开关实现修改switch开关的状态
Cc
08-15 1215
element表格中使用switch开关实现修改switch开关的状态
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值