前言
这里我们用后端返回的status字段来判断启用还是停用状态
后端给我们提供的status的值有可能是数字(status:0)也可能是字符串(status:'0')
这两种的写法是有区别的:0为启用、1为停用
//status:0时
:active-value="0"
:inactive-value="1"
//status:'0'时
active-value="0"
inactive-value="1"
一、页面展示
1.status为数字类型(status:0)
代码如下(示例):
<el-table-column
prop="status"
label="状态"
min-width="100"
align="center"
>
<!-- 插槽 -->
<template slot-scope="scope">
<span v-if="scope.row.status == 0">启用</span>
<span v-else>禁用</span>
<el-switch
@change="handleStatusChange(scope.row)"
:value="scope.row.status"
active-color="#13ce66"
inactive-color="#ff4949"
:active-value="0"
:inactive-value="1"
>
</el-switch>
</template>
</el-table-column>
2.status为字符串类型(status:'0')
代码如下(示例):
<el-table-column
prop="status"
label="状态"
min-width="100"
align="center"
>
<!-- 插槽 -->
<template slot-scope="scope">
<span v-if="scope.row.status == 0">启用</span>
<span v-else>禁用</span>
<el-switch
@change="handleStatusChange(scope.row)"
:value="scope.row.status"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="0"
inactive-value="1"
>
</el-switch>
</template>
</el-table-column>
二、调接口实现启停功能需要的入参
1.这里我们后端要的参数status数据类型变成了数字,所以用了Number转换,如果接口文档还是要求字符串类型就没必要写
//用户启停
handleStatusChange(row) {
const params = {
id: row.id,
status: Number(row.status == "0" ? "1" : "0"),
};
},
2.有的同学会遇到只要点击了按钮出现弹窗,还没点确认按钮状态就变化了。原因在于使用了v-model ,在我还没有点击确认隐藏时他就已经改成隐藏了,这不是我们想要的效果,把v-model改为:value就行了。
总结
小白第一次写启停,踩了不少坑/(ㄒoㄒ)/~~