在table表格中使用element的switch组件

最新推荐文章于 2024-06-06 10:25:17 发布
最新推荐文章于 2024-06-06 10:25:17 发布
阅读量1.8k 收藏 6
点赞数 2
文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42174401/article/details/106768609
版权
本文探讨了在ElementUI中使用Switch组件时遇到的问题及解决方法。主要讨论了如何正确地将后端传来的数据与Switch的状态进行绑定，确保Switch的初始状态能够正确反映数据的真实情况。特别注意数据类型的一致性，如后端传来的数据为字符串类型，则需在绑定值时加上引号。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

关于在element ui中使用switch遇到的问题

在使用element ui中会遇到这样的需求,在表格中插入switch,在页面加载的时候,switch的状态也会随着数据的不同而发生改变

在这里插入图片描述
![向这样](https://img-blog.csdnimg.cn/2020061517230378.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE3NDQwMQ==,size_16,color_FFFFFF,t_70
像这样,我之前的想法是用v-if后来发现行不通,之后看官方文档发现有对应的开和关闭
在这里插入图片描述
那就很简单了,绑定,给值
在这里插入图片描述
之后发现还是不能使开关的状态与其对应,说好的1为开0为关呢
再仔细看一眼.,原来是其中的数值类型需要对应上
如果后端传过来的使string类型,那咱们就需要把绑定的数字1加上’'引号在这里插入图片描述
像这样就会发现开关初始状态渲染成功了!
在这里插入图片描述

vue3+element-plus 项目中 el-switch 刷新后自动触发change？坑就藏在这里！
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
03-14 399
el-switch组件的和必须和v-model绑定的值类型一致如果没有加，那么它们是字符串，可能会触发@change事件遇到@change刷新后自动触发的问题，优先检查数据类型是否匹配这个问题看似简单，但实际上是官方的默认行为，所以遇到这种坑，先去 GitHub issue 搜一下，可能就能少踩点坑 😆。
基于Element Plus二次封装的表格组件中添加插槽-实现内容自定义
alice9999999的博客
08-07 5510
element表格中具名插槽
Element UI中swich(开关)在表格中的使用
Lee优快云77的博客
05-20 3745
需求说明 根据后台传值动态显示开关（0为关，1为开） 对开关进行操作时请求后台，需要传两个参数：ID，Status 问题描述 Swich默认是boolean类型，而后台传值 为number类型 Swich的chang方法中只有一个回调参数 解决方法 1.自定义 <el-switch v-model="status" active-value="1" inacti...
Vue+Element UI 向Table组建中的每一行添加一个switch组件，实现每一行单独控制及其踩坑
weixin_48371382的博客
04-21 947
<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中table表格中使用Switch 开关及调接口
Jadon_z的个人博客
08-29 3927
Element UI中table表格中使用Switch 开关及调接口
vue3+elementPlus：el-table表格里设置switch开关
意初的博客
09-30 1万+
vue3+elementPlus：el-table表格里设置switch开关。里面写v-model用来绑定字段。在开关外层用插槽包裹。用插槽包裹el-switch开关，v-model双向响应,js层，实战版本,请求后台接口版,与后台接口交互将数据传给el-table绑定的:data=>data.tableList，，注意：要数据里有changer这个字段。最后将请求函数挂载到vue视图上
Vue3 + Element Plus项目el-table表格里使用el-switch开关按钮效果
最新发布
u010797364的博客
06-06 1482
在开关外层用插槽包裹，里面写v-model用来绑定字段。
element在表格中使用switch开关，单独控制
liuy_1314的博客
05-28 3644
<el-table-column v-if="columns.visible('ix02')" :show-overflow-tooltip="true" prop="ix02" label="是否推送" > <template slot-scope="scope"> <el-switch v-...
element表格使用render方法添加el-switch标签
weixin_43447086的博客
04-19 1149
代码： 实现效果：
element ui 表格组件与分页组件的二次封装
每天都要努力学习哦~~
09-06 2304
这段代码是一个封装的分页表格组件。它使用了Vue.js框架，并结合了Element UI中的el-table和el-pagination组件来实现。该组件接受一系列属性作为数据源，包括列表数据(list)、表格列(columns)、操作按钮列(operates)、总数(total)、分页参数(pagination)等。在模板中，使用el-table组件来展示表格数据，使用el-pagination组件来实现分页功能。el-table-column用来定义每列的样式和展示内容。
vue Cli ElementUi封装Table表格加分页组件，使用render渲染函数提升组件复用性
qq_40250507的博客
06-09 918
Vue cli二次封装Element Ui的Table表格加分页组件，使用render渲染函数提升组件复用性； 因为项目每个页面都需要Table表格和分页，所以就想着把表格和分页封装成组件，废话少说直接上干货： Table组件内容： 新建commonTable.vue文件(直接全部复制，组件引用自己去看全局引用组件)： <template> <div> <el-table :data="tableData" size="medium" fit
解决Element-Plus中el-switch的change方法自动触发问题
qq_41623635的博客
01-05 5441
getCurrentInstance()方法是Vue3 Composition API中的一个API函数。它的作用是返回一个组件实例对象，可以用来操作当前组件的各种属性和方法。这个方法是一个全局API，可以在任何地方使用。
Vue+Element UI 向Table组建中的每一行添加一个switch组件，实现每一行单独控制
热门推荐
一捆铁树枝的博客
09-12 1万+
  最近在做公司的设备管理系统，权限管理中有一个需求需要展示如下： 每一行表格中的switch单独控制一行； 实现效果的代码如下： &lt;el-table :data="userRights" stripe border align="center" style="width: 100%;"&gt; &lt;el-table-column prop=...
由element-ui的switch扩展的value类型引发的vue中标签值的数值与字符串问题
dannil00的博客
06-15 1198
由element-ui的switch扩展的value类型引发的vue中标签值的数值与字符串问题
Element Plus ＜el-table＞ 组件之展开行Table在项目中使用
夏日漱石的博客
08-20 2595
Element Plus 组件之展开行Table在项目中使用
elementui表格中switch开关控件的使用
mangguom23的博客
08-19 1844
在elementui中switch用法如下： https://element.eleme.cn/#/zh-CN/component/switch <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch> <script> export default { data() { return { value
table里的switch开关
qq_43688916的博客
08-06 1240
用template 的slot-scope=“scope” 获取到当前行或者列的信息 从而拿到 状态值 赋给v-model 若是改变状态 用change事件发送请求 修改状态 <el-table-column prop="status" label="用户状态"> <template slot-scope="scope"> <el-...
element---在el-table中el-switch用法
weixin_45102212的博客
02-15 6050
项目中操作此数据： <el-table-column prop="custom" label="是否展示" align="center"> <template slot-scope="scope"> <el-switch v-model="scope.row.custom" active-value="1" inactive-value=
Vue3 Table 性能优化，减少 85% 渲染耗时
程序员成长指北
02-06 1925
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群原文链接: https://juejin.cn/post/7194516447932973112作者：dev_zuo前段时间公司有一个比较重要的模块从 vue2 升级到 vue3，升级后发现 element-plus table 的性能相比 vue2 版本下降非常严重。自定义列全部勾选的场景下（2...
快速集成element-ui的Vue表单与表格组件
资源摘要信息: 本资源主要介绍了如何基于Element-UI进行Vue项目的表单（Form）和表格（Table）的封装，封装的模块名为mcommon，并提供了具体的使用方法和npm包名。该资源主要面向前端开发人员，尤其是熟悉Vue.js框架...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值