element多选表格中使用Switch开关的实现
当在做后台管理系统的时候，会用到用户的状态管理这个功能。一般后端给返回的类型都是整型0或1。此时想通过该状态来禁用或者开启此用户。
在官网中给到active-value(switch 打开时的值),inactive-value(switch 关闭时的值),并且支持的类型有boolean / string / number。一般后端传输的都是以number类型。
active-value和inactive-value的值分别是字符串的1和0,如果你赋值为数字类型的 1 或 0是无法正常工作的，若赋值为数值类型，需这样写：
<el-switch v-model="status" :active-value="1" :inactive-value="0"> </el-switch>
一、 此时若想跟表格中匹配几条数据就有几个开关时需要这样写：
1、要拿到当前行的数据在template标签中使用**slot-scope=“scope”就可以了
2、使用时在 v-model=“scope.row.字段”就可以把后端返回的开关数据展示在表格中
<el-table-column prop="disable" label="状态" width="120">
<template slot-scope="scope">
<el-switch
v-model="scope.row.mg_state"
></el-switch>
</template>
</el-table-column>二、触发时间调用后端接口，修改开关数据
给Switch 开关加上@change="changeStatus($event, scope.row, scope.$index)"
<el-table-column prop="disable" label="状态" width="120">
<template slot-scope="scope">
<el-switch
v-model="scope.row.mg_state"
@change="changeStatus($event, scope.row, scope.$index)" //加上触发时间
:active-value="scope.row.disable == 1" //根据后端返回的数据绑定1为开的状态
:inactive-value="scope.row.disable == 0" //根据后端返回的数据绑定0为关的状态
></el-switch>
</template>
</el-table-column>在methods中写上方法，去调接口方法名(e,row,index) //e返回状态true或false，row当前行数据，index下标
changeStatus(e, row, index) {
//e返回状态，row当前行数据，index下标
console.log(e, row, index);
let userId = row.userId;
let disable = row.disable;
axios.get(`http://xxxxx/xx?userId=${userId}&disable=${disable}`).then((res)=>{
console.log(res);
})
}到此这篇关于element多选表格中使用Switch开关的实现的文章就介绍到这了,更多相关element Switch开关内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue3 reactive定义的引用类型直接赋值导致数据失去响应式问题
这篇文章主要介绍了vue3 reactive定义的引用类型直接赋值导致数据失去响应式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要为大家介绍了Vue3设计思想及响应式源码解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
Vux是Vue.js的一个ui库，官网在这里，官方文档的配置指南侧重于技术的罗列，我这里简化一下Vux的配置流程。感兴趣的朋友跟随脚本之家小编一起学习吧2017-12-12
如果你在 vue3 开发中使用了语法的话,对于组件的name属性,需要做一番额外的处理,下面这篇文章主要给大家介绍了关于Vue3 setup添加name的相关资料,需要的朋友可以参考下2022-11-11
vue-element-admin后台生成动态路由及菜单方法详解
vue-element-admin后台管理系统模板框架 是vue结合element-ui一体的管理系统框架,下面这篇文章主要给大家介绍了关于vue-element-admin后台生成动态路由及菜单的相关资料,需要的朋友可以参考下2023-09-09
在开发Vue项目时,经常需要处理文档的预览和下载功能,尤其是对于PDF、PPT、Word和Excel这类文件格式,为了实现这一功能,开发者常常面临处理不同文件格式和类型数据源的挑战,所以本文将详细探讨如何在Vue项目中预览上述文档格式,需要的朋友可以参考下2025-09-09
在Vue3中,ref提供了访问组件内DOM元素和子组件实例的方法,防抖是一种限制函数调用频率的方法,即在一定时间内多次触发同一个函数,只执行最后一次触发的函数,本文将给大家介绍了Vue3如何利用自定义ref实现防抖,需要的朋友可以参考下2024-05-05
使用this.$nextTick()获取不到数据更新后的this.$refs.xxx.及场景分析
今天遇到了这样一个场景，在数据更新之后，使用this.$nextTick(()=>{console.log(this.$refs.xxx)}) 获取不到改dom，但是用setTimeout能够获取到，在此记录一下，感兴趣的朋友跟随小编一起看看吧2023-02-02
误引用vuex-persistedstate导致用户信息无法清除问题及解决
这篇文章主要介绍了误引用vuex-persistedstate导致用户信息无法清除问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue使用vue-video-player无法播放本地视频的问题及解决
这篇文章主要介绍了vue使用vue-video-player无法播放本地视频的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
最新评论