需求：二次确认后且后台返回成功后再修改状态
方法一：在render中的before-change中阻止切换，但是由于需要传参params.row.block，提取单独函数后无法传值，只能在里面写
columns: [
{
title: 'IOC',
key: 'ioc'
},
{
title: '类型',
key: 'type'
},
{
title: '来源',
slot: 'origin'
},
{
title: '试验',
slot: 'block'
},
{
title: '是否阻断',
render: (h, params) => {
let vm = this
return h('i-switch', {
props: { //这里可以设置它的属性
value: params.row.block, //设置它的值
'true-value': '是',
'false-value': '否',
// 'before-change': vm.beforeChange, //因为需要传参params.row.block,提取单独函数后无法传
'before-change': function beforeChange() {
return new Promise(resolve => {
vm.$Modal.confirm({
title: '切换确认',
content: '您确认要切换开关状态吗？',
onOk: () => {
let tempBlock = params.row.block == '是' ? '否' : '是';
model.changeBlock({
block: tempBlock,
id: params.row.id
}).then(res => {
Message.success({
background: true,
content: res.msg
});
resolve();
}).catch((error) => {
})
}
});
})
}
},
on: { //操作事件
'on-change': function (status) { //值发生了改变调用方法
}
}
})
}
},
{
title: '操作',
slot: 'action',
width: 150,
}
],
方法二：
使用原生click事件，先把切换后的值再切换回来，等到二次确认后且后台返回成功后再修改状态
<Table border :columns="columns" :data="data">
<template slot-scope="{ row, index }" slot="origin">
{{row.origin | originFilter}}
</template>
<template slot-scope="{ row, index }" slot="block">
<i-switch @click.native="test(row)" v-model="row.block" true-value="是" false-value="否"></i-switch>
</template>
<template slot-scope="{ row, index }" slot="action" v-if="row.origin=='1'">
<Button type="primary" size="small" style="margin-right: 5px" @click="editItem(row)">编辑</Button>
<Button type="primary" size="small" style="margin-right: 5px" @click="delItem(row)">删除</Button>
</template>
</Table>
<script>
import model from "../api/model";export default {
name: "rulesMsg",
methods: {
test(row) {
let flag = row.block == '是' ? true : false //保存修改后状态
row.block = row.block == '是' ? '否' : '是'
this.$Modal.confirm({
title: '切换确认',
content: '您确认要切换开关状态吗？',
onOk: () => {
let tempBlock = row.block == '是' ? '否' : '是';
model.changeBlock({
block: tempBlock,
id: row.id
}).then(res => {
Message.success({
background: true,
content: res.msg
});
row.block = flag?'是':'否'
}).catch((error) => {
})
}
});
}
},
</script>
