实现表格中的el-switch 开关切换
一、目的:vue项目 实现表格中的el-switch 开关切换请求后台接口,请求成功则开启成功,请求失败则处于关闭状态二、实现步骤:1、html部分:<template slot-scope="scope"><el-switchv-model="scope.row.status"active-color="#13ce66"inactive-color...
·
一、目的:
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;
})
}
}
}
更多推荐
已为社区贡献32条内容
所有评论(0)