需求:如下图中,switch开关在禁止时需要有个是否禁用的选项,在启用时则直接启用,无需确认
现状: 使用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>