chore: 临时解决方案 for 弹窗组件内部表格
This commit is contained in:
parent
0a99b4049d
commit
bae08aa6c5
@ -1,7 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { Recordable } from '@vben/types';
|
import type { Recordable } from '@vben/types';
|
||||||
|
|
||||||
import { ref } from 'vue';
|
import { nextTick, ref } from 'vue';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
|
|
||||||
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
|
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
|
||||||
@ -79,8 +79,24 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const init = ref(true);
|
||||||
const [RoleAssignDrawer, drawerApi] = useVbenDrawer({
|
const [RoleAssignDrawer, drawerApi] = useVbenDrawer({
|
||||||
connectedComponent: roleAssignDrawer,
|
connectedComponent: roleAssignDrawer,
|
||||||
|
/**
|
||||||
|
* TODO: 等待官方修复
|
||||||
|
* 临时解决方案 for https://github.com/vbenjs/vue-vben-admin/issues/4752
|
||||||
|
* 通过在关闭时使用v-if切换来造成Modal的重新渲染
|
||||||
|
* 目前Modal逻辑为每次打开 内部的元素会重新mount 但是Modal本身不会重新渲染
|
||||||
|
* 该方案会造成关闭动画丢失(应该放在afterClose中)
|
||||||
|
* @param isOpen 是否打开
|
||||||
|
*/
|
||||||
|
onOpenChange: async (isOpen) => {
|
||||||
|
if (!isOpen) {
|
||||||
|
init.value = false;
|
||||||
|
await nextTick();
|
||||||
|
init.value = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
function handleAdd() {
|
function handleAdd() {
|
||||||
@ -156,6 +172,6 @@ function handleMultipleAuthCancel() {
|
|||||||
</Popconfirm>
|
</Popconfirm>
|
||||||
</template>
|
</template>
|
||||||
</BasicTable>
|
</BasicTable>
|
||||||
<RoleAssignDrawer @reload="tableApi.query()" />
|
<RoleAssignDrawer v-if="init" @reload="tableApi.query()" />
|
||||||
</Page>
|
</Page>
|
||||||
</template>
|
</template>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { Recordable } from '@vben/types';
|
import type { Recordable } from '@vben/types';
|
||||||
|
|
||||||
import { onMounted, ref } from 'vue';
|
import { nextTick, onMounted, ref } from 'vue';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
|
|
||||||
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
|
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
|
||||||
@ -188,8 +188,24 @@ function handleMultiDelete() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const init = ref(true);
|
||||||
const [TableImportModal, tableImportModalApi] = useVbenModal({
|
const [TableImportModal, tableImportModalApi] = useVbenModal({
|
||||||
connectedComponent: tableImportModal,
|
connectedComponent: tableImportModal,
|
||||||
|
/**
|
||||||
|
* TODO: 等待官方修复
|
||||||
|
* 临时解决方案 for https://github.com/vbenjs/vue-vben-admin/issues/4752
|
||||||
|
* 通过在关闭时使用v-if切换来造成Modal的重新渲染
|
||||||
|
* 目前Modal逻辑为每次打开 内部的元素会重新mount 但是Modal本身不会重新渲染
|
||||||
|
* 该方案会造成关闭动画丢失(应该放在afterClose中)
|
||||||
|
* @param isOpen 是否打开
|
||||||
|
*/
|
||||||
|
onOpenChange: async (isOpen) => {
|
||||||
|
if (!isOpen) {
|
||||||
|
init.value = false;
|
||||||
|
await nextTick();
|
||||||
|
init.value = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
function handleImport() {
|
function handleImport() {
|
||||||
@ -290,6 +306,6 @@ function handleImport() {
|
|||||||
</template>
|
</template>
|
||||||
</BasicTable>
|
</BasicTable>
|
||||||
<CodePreviewModal />
|
<CodePreviewModal />
|
||||||
<TableImportModal @reload="tableApi.query()" />
|
<TableImportModal v-if="init" @reload="tableApi.query()" />
|
||||||
</Page>
|
</Page>
|
||||||
</template>
|
</template>
|
||||||
|
Loading…
Reference in New Issue
Block a user