fix: 在VxeTable固定列时, getPopupContainer会导致宽度不够, 弹出层样式异常 解决办法(将弹窗元素挂载到VXe滚动容器上

This commit is contained in:
dap
2024-11-02 15:08:18 +08:00
parent 7442c6f15b
commit 9f33320bea
22 changed files with 83 additions and 42 deletions

View File

@@ -4,7 +4,7 @@ import type { Recordable } from '@vben/types';
import { ref } from 'vue';
import { useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
@@ -144,7 +144,7 @@ emitter.on('rowClick', async (value) => {
<template>
<div>
<BasicTable table-title="字典数据列表">
<BasicTable id="dict-data" table-title="字典数据列表">
<template #toolbar-tools>
<Space>
<a-button
@@ -187,7 +187,9 @@ emitter.on('rowClick', async (value) => {
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
:get-popup-container="
(node) => getVxePopupContainer(node, 'dict-data')
"
placement="left"
title="确认删除"
@confirm="handleDelete(row)"

View File

@@ -5,7 +5,7 @@ import { computed, ref } from 'vue';
import { useAccess } from '@vben/access';
import { useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { getVxePopupContainer } from '@vben/utils';
import {
Dropdown,
@@ -188,7 +188,7 @@ const couldSyncTenantDict = computed(() => {
<template>
<div>
<BasicTable table-title="字典类型列表">
<BasicTable id="dict-type" table-title="字典类型列表">
<template #toolbar-tools>
<Space>
<Dropdown>
@@ -243,7 +243,9 @@ const couldSyncTenantDict = computed(() => {
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
:get-popup-container="
(node) => getVxePopupContainer(node, 'dict-type')
"
placement="left"
title="确认删除"
@confirm="handleDelete(row)"