el-table 中使用 switch 开关

需求说明

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

套用

<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 开启 / 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

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。