当在做后台管理系统的时候,会用到用户的状态管理这个功能。一般后端给返回的类型都是整型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);
})
}