实现表格中的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;
		})
	}
}
}

你可能感兴趣的:(vue)