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;
}
});
});
},