发布于 

el-table 中使用 switch 开关

需求说明

  • 是根据后台返回 0(停用)1(启用) 动态显示开关
  • 对开关进行操作时请求后台,需要传两个参数:idstatus
  • 启用时传 1 停用时传 0 并携带 id ,当主机下面包含通道是则不能改变状态,并根据给出提示

套用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<el-table-column
prop="status"
label="状态"
align='center'
width="150">
<template slot-scope='scope'>
<el-switch
v-model="scope.row.status"
active-color="#13CE66" // 开启颜色
inactive-color="#C0CCDA" // 关闭颜色
:active-value="1" // 判定数值1为开启
:inactive-value="0" // 0为关闭
@change=changeComputerStatus($event,scope.row)>
</el-switch>
{{ scope.row.status === 0 ? " 停用" : " 启用" }}
</template>
</el-table-column>

@change事件函数

1
2
3
4
5
6
7
8
9
10
11
12
13
// 改变主机状态: 1 开启 / 0 关闭
changeComputerStatus(changeStatus, row){
const para = {id: row.id, status: changeStatus} // 参数
updateComputerStatus(para).then(res => { // 后台请求
this.$message({
message: res.msg,
type: 'success'
})
this.getComputerPage() // 重新获取table列表
}).catch(() => {
row.status = !changeStatus * 1 // 失败保持switch点击前的状态
})
},

效果图

changeStatus是改变的值,业务场景是如果这台主机下面有通道且是开启状态,则不能关闭该主机,执行后,后端则返回状态码300,进入catch语句此时>changeStatus 默认为 0,前面加上 ! 后它的返回值却成了boolean类型true,我们需要的是 1,而不是true ,这种情况只需后面* 1 就可以将>true转换成 1

API 参数

参数 说明 类型 可选值 默认值
active-value switch 打开时的值 boolean / string / number true
inactive-value switch 关闭时的值 boolean / string / number false
active-color switch 打开时的背景色 string #409EFF
inactive-color switch 关闭时的背景色 string #C0CCDA

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。

本站由 @xiangshu 创建,使用 Stellar 作为主题。