实现表格中的el-switch 开关切换

一、目的:

vue项目 实现表格中的el-switch 开关切换请求后台接口,请求成功则开启成功,请求失败则处于关闭状态

二、实现步骤:

1、html部分:

<template slot-scope="scope">
	<el-switch
		v-model="scope.row.status"
		active-color="#13ce66"
		inactive-color="#ff4949"
		:active-value="1"
		:inactive-value="0"
		@change="changeStatus($event,scope.row,scope.$index)"
	/>
</template>

2、script部分

export default{
	data():return{
	tableData:[],//存表格的数据容器
}
methods:{
	//改变表格中的el-switch开关状态
	changeStatus(e,row,index){        //e表示el-switch的状态(true,false)
		//请求接口
		axios.post('xxxxxxx-url'{ 
			status: e ? 1 : 0 
			}
		).then(res => {
			console.log('切换状态成功');
			//TODO :刷新列表数据
			
		}).catch(err => {
			console.log('切换状态失败');
			let newData = row;
			newData.status = newData.status === 1 ? 0 : 1;//恢复 原状态
			this.tableData[index] = newData;
		})
	}
}
}

  • 6
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值