el-switch:
<el-switch
@change="switchChange1(scope.row)"
v-model="scope.row.IsAdmin"
class="ml-2"
style="--el-switch-on-color: #f69675; --el-switch-off-color: #e2e2e3"
/> <span v-if="scope.row.IsAdmin">启用</span
><span v-if="!scope.row.IsAdmin">已禁用</span>
</template>
</el-table-column>
<el-table-column prop="updateTime" label="用户状态">
<template #default="scope">
<el-switch
@change="switchChange2(scope.row)"
:value ="scope.row.EntityState===1?true:false"
class="ml-2"
style="--el-switch-on-color: #13c75b; --el-switch-off-color: #e2e2e3"
/> <span
v-if="scope.row.EntityState===1"
>启用</span
><span v-if="scope.row.EntityState===3">已禁用</span>
</template>
</el-table-column>
</el-table>
<el-switch
@change="switchChange3"
v-model="isall"
class="ml-2"
style="--el-switch-on-color: #13c75b; --el-switch-off-color: #e2e2e3;margin-top:10px"
/> <span v-if="isall===false">用户状态批量启用</span><span v-if="isall">用户状态批量禁用</span>
数据初始化:
export default {
data() {
return {
ids:[],//接口传递的参数
isall:false,//控制批量
};
},
方法体:
switchChange1(val) {
gruanUserAdministrator({
id: val.Id,
userBp: val.UserBP,
isAdmin: val.IsAdmin,
}).then((res) => {
if (res.AntsCode === 200) {
ElMessage({
message: '操作成功',
type: "success",
});
} else {
ElMessage.error("操作失败");
}
});
},
switchChange2(val) {
console.log('vvv',val.EntityState)
if(val.EntityState ===1){
this.isVisiable = false
}else{
this.isVisiable = true
},
switchChange3(){
let data ={
ids: this.ids,
userBp: sessionStorage.getItem("UserBp") ,
isVisiable: this.isall?true:false,
}
效果: