iview中Switch 开关before-change使用

1,206 阅读1分钟

需求:如下图中,switch开关在禁止时需要有个是否禁用的选项,在启用时则直接启用,无需确认

0806da5a4b1eac2e9591bb93f0e6ae7.png

现状: 使用iview组件库,iview4.0.0支持了阻止切换的预处理,即before-change事件,但是在状态切换前都会进行弹窗提示 以下是iview现有的操作:

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

解决方案: 用.bind()实现传参

<template
    slot-scope="{row}"
    slot="disabled">
    <Switch :before-change="handleBeforeChange.bind(this, row)" />
</template>
<script>
    export default {
        methods: {
            handleBeforeChange (row) {
                return new Promise((resolve) => {
                    if (!row.disabled) {
                      this.$Confirm.warning({
                        title: `是否禁用表${row.tableName}?`,
                        content: '禁用后,不可对该表数据进行读写,请谨慎操作。',
                        okText: '禁用',
                        onOk: () => {
                          // TODO: 进行禁用操作
                        }
                      })
                    } else {
                      // TODO: 进行启用操作
                    }
                });
            }
        }
    }
</script>