element多选表格中使用Switch开关的实现
作者：爱吹空调的小八
当在做后台管理系统的时候，会用到用户的状态管理这个功能，本文主要介绍了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开关内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！