# 需求说明

# 套用

<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>
		<!--swig0-->
	 </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-valueswitch 打开时的值boolean / string / numbertrue
inactive-valueswitch 关闭时的值boolean / string / numberfalse
active-colorswitch 打开时的背景色string#409EFF
inactive-colorswitch 关闭时的背景色string#C0CCDA
更新于 阅读次数

请我喝[茶]~( ̄▽ ̄)~*

乡树 微信支付

微信支付

乡树 支付宝

支付宝