iview的switch点击时先不改变状态,然后根据二级判断的返回值修改switch的状态???

switch使用render函数在table中渲染出来的,目前的需求是,点击switch,要么先不改变状态,根据二级判断的返回值
来切换状态,如果返回值为false,switch状态不变,返回值为true时,再改变switch的状态。
要么就是点击switch状态改变,然后根据二级判断的返回值,如果是false再变回原来的状态,如果是true,则不用

文档里不是写了before-change方法么,可以通过这个方法实现

<template>
    <Switch :before-change="handleBeforeChange" />
</template>
<script>
    export default {
        methods: {
            handleBeforeChange () {
                return new Promise((resolve) => {
                    this.$Modal.confirm({
                        title: '切换确认',
                        content: '您确认要切换开关状态吗?',
                        onOk: () => {
                            resolve();
                        }
                    });
                });
            }
        }
    }
</script>


回复咖啡教室: 是的,这是个方法,能起到二次确认的作用,我之前在viewUI有看到poptip这个组件,但是有一点不足的是,在poptip确认的时候在边缘处会显示不完全!
图片说明

图片说明

已解决:(有地方不明白的可以问我)
图片说明

{
                            title: '状态',
                            key: 'status',
                            width: 80,
                            render: (h, params) => {
                                return h('i-switch', {
                                        on: {
                                            'on-change': () => {
                                                (this as any).switchStatus(params)
                                            },
                                            'input': (value) => {
                                                (this as any).table.list[params.index].status = value ? 1 : 0;
                                            },
                                        },
                                        props:
                                            {
                                                size: 'large',
                                                // value: (this as any).table.list[params.index].status ? true : false,
                                                value: !!(this as any).table.list[params.index].status,
                                            },
                                    }, [
                                        h('span', {slot: 'open',}, this.$t('alaramRule.enable')),
                                        h('span', {slot: 'close',}, this.$t('alaramRule.prohibit')),
                                    ], ''
                                );
                            },
                        },


                                          // 切换状态
            switchStatus: function (params) {
                const row = params.row;
                return new Promise((resolve) => {
                    this.$Modal.confirm({
                        title: row.status === 1 ? '禁用确认' : '启用确认',
                        content: row.status === 1 ? `您确认要禁用 ${row.planName} 吗?` : `您确认要启用 ${row.planName} 吗?`,
                        onOk: () => {
                            row.status = row.status !== 1 ? 1 : 0;
                            const params = {planId: row.planId, status: row.status};
                            updateEsdPlanStatus(params).then(res => {
                                this.$Message.success("切换成功");
                            });
                        },
                        onCancel: () => {
                            this.table.list[row._index].status = row.status;
                        }
                    });
                });
            },