<el-table-column label="启用" align="center" prop="status">
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
:active-value="1"
<!-- switch 打开时的值 默认true 后面的1或者2是需要后台需要的开和关对应上 -->
<!-- switch 关闭时的值 默认false -->
:inactive-value="2"
@change="changeSwitch($event,scope.row)"
>
</el-switch>
</template>
</el-table-column>
// 开关事件
changeSwitch(row) {
this.$confirm('是否启用或禁用?', '提示', {
confirmButtonText: '是',
cancelButtonText: '否',
type: 'warning'
})
.then(() => {
outsourceSwitch({ guid: row.guid, status: row.status }) // 接口和参数
.then((res) => {
if (row.status === 2) {
this.$message.success('禁用成功')
this.getList()
} else {
this.$message.success('启用成功')
this.getList()
}
})
.catch((err) => {
const status = row.status === 1 ? 2 : 1
row.status = status
console.log(err)
})
})
.catch(() => {
const status = row.status === 1 ? 2 : 1
row.status = status
this.$message({
type: 'info',
message: '已取消'
})
})
}