Bug: vxe表格虚拟滚动与自动行高冲突问题

[SingingHan]

Version

Vben Admin V5

Describe the bug?

vxe表格在虚拟滚动的情况下, 如果表格的高度是的自动, 会行高冲突问题, 具体体现在, 如果我修改表格的size为200, 就会出现显示的表格数据行数没有到达200的情况.

Reproduction

在229行的位置, 新增代码, 就可以解决:
if (
mergedOptions.virtualYConfig?.enabled &&
mergedOptions.rowConfig?.height === 'auto'
) {
// Virtual scrolling assumes fixed row height; auto height can clip rows.
mergedOptions.virtualYConfig.enabled = false;
}

System Info

System:
    OS: macOS 15.6.1
    CPU: (10) arm64 Apple M4
    Memory: 157.13 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.14.0 - /Users/yanghan/.nvm/versions/node/v22.14.0/bin/node
    npm: 10.9.2 - /Users/yanghan/.nvm/versions/node/v22.14.0/bin/npm
    pnpm: 10.14.0 - /Users/yanghan/.nvm/versions/node/v22.14.0/bin/pnpm
    Watchman: 2026.01.05.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 144.0.7559.97
    Safari: 18.6

Relevant log output

Validations

• Read the docs
• Ensure the code is up to date. (Some issues have been fixed in the latest version)
• I have searched the existing issues and checked that my issue does not duplicate any existing issues.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[SingingHan]

修改这个文件: use-vxe-grid.vue

[SingingHan]

<script lang="ts" setup> import type { VxeGridDefines, VxeGridInstance, VxeGridListeners, VxeGridPropTypes, VxeGridProps as VxeTableGridProps, VxeToolbarPropTypes, } from 'vxe-table'; import type { SetupContext } from 'vue'; import type { VbenFormProps } from '@vben-core/form-ui'; import type { ExtendedVxeGridApi, VxeGridProps } from './types'; import { computed, nextTick, onMounted, onUnmounted, toRaw, useSlots, useTemplateRef, watch, } from 'vue'; import { usePriorityValues } from '@vben/hooks'; import { EmptyIcon } from '@vben/icons'; import { $t } from '@vben/locales'; import { usePreferences } from '@vben/preferences'; import { cloneDeep, cn, isBoolean, isEqual, mergeWithArrayOverride, } from '@vben/utils'; import { VbenHelpTooltip, VbenLoading } from '@vben-core/shadcn-ui'; import { VxeButton } from 'vxe-pc-ui'; import { VxeGrid, VxeUI } from 'vxe-table'; import { extendProxyOptions } from './extends'; import { useTableForm } from './init'; import 'vxe-table/styles/cssvar.scss'; import 'vxe-pc-ui/styles/cssvar.scss'; import './style.css'; interface Props extends VxeGridProps { api: ExtendedVxeGridApi; } const props = withDefaults(defineProps(), {}); const FORM_SLOT_PREFIX = 'form-'; const TOOLBAR_ACTIONS = 'toolbar-actions'; const TOOLBAR_TOOLS = 'toolbar-tools'; const TABLE_TITLE = 'table-title'; const gridRef = useTemplateRef('gridRef'); const state = props.api?.useStore?.(); const { gridOptions, class: className, gridClass, gridEvents, formOptions, tableTitle, tableTitleHelp, showSearchForm, separator, } = usePriorityValues(props, state); const { isMobile } = usePreferences(); const isSeparator = computed(() => { if ( !formOptions.value || showSearchForm.value === false || separator.value === false ) { return false; } if (separator.value === true || separator.value === undefined) { return true; } return separator.value.show !== false; }); const separatorBg = computed(() => { return !separator.value || isBoolean(separator.value) || !separator.value.backgroundColor ? undefined : separator.value.backgroundColor; }); const slots: SetupContext['slots'] = useSlots(); const [Form, formApi] = useTableForm({ compact: true, handleSubmit: async () => { const formValues = await formApi.getValues(); formApi.setLatestSubmissionValues(toRaw(formValues)); props.api.reload(formValues); }, handleReset: async () => { const prevValues = await formApi.getValues(); await formApi.resetForm(); const formValues = await formApi.getValues(); formApi.setLatestSubmissionValues(formValues); // 如果值发生了变化，submitOnChange会触发刷新。所以只在submitOnChange为false或者值没有发生变化时，手动刷新 if (isEqual(prevValues, formValues) || !formOptions.value?.submitOnChange) { props.api.reload(formValues); } }, commonConfig: { componentProps: { class: 'w-full', }, }, showCollapseButton: true, submitButtonOptions: { content: computed(() => $t('common.search')), }, wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3', }); const showTableTitle = computed(() => { return !!slots[TABLE_TITLE]?.() || tableTitle.value; }); const showToolbar = computed(() => { return ( !!slots[TOOLBAR_ACTIONS]?.() || !!slots[TOOLBAR_TOOLS]?.() || showTableTitle.value ); }); const toolbarOptions = computed(() => { const slotActions = slots[TOOLBAR_ACTIONS]?.(); const slotTools = slots[TOOLBAR_TOOLS]?.(); const searchBtn: VxeToolbarPropTypes.ToolConfig = { code: 'search', icon: 'vxe-icon-search', circle: true, status: showSearchForm.value ? 'primary' : undefined, title: showSearchForm.value ? $t('common.hideSearchPanel') : $t('common.showSearchPanel'), }; // 将搜索按钮合并到用户配置的toolbarConfig.tools中 const toolbarConfig: VxeGridPropTypes.ToolbarConfig = { tools: (gridOptions.value?.toolbarConfig?.tools ?? []) as VxeToolbarPropTypes.ToolConfig[], }; if (gridOptions.value?.toolbarConfig?.search && !!formOptions.value) { toolbarConfig.tools = Array.isArray(toolbarConfig.tools) ? [...toolbarConfig.tools, searchBtn] : [searchBtn]; } if (!showToolbar.value) { return { toolbarConfig }; } // 强制使用固定的toolbar配置，不允许用户自定义 // 减少配置的复杂度，以及后续维护的成本 toolbarConfig.slots = { ...(slotActions || showTableTitle.value ? { buttons: TOOLBAR_ACTIONS } : {}), ...(slotTools ? { tools: TOOLBAR_TOOLS } : {}), }; return { toolbarConfig }; }); const options = computed(() => { const globalGridConfig = VxeUI?.getConfig()?.grid ?? {}; const mergedOptions: VxeTableGridProps = cloneDeep( mergeWithArrayOverride( {}, toRaw(toolbarOptions.value), toRaw(gridOptions.value), globalGridConfig, ), ); if (mergedOptions.proxyConfig) { const { ajax } = mergedOptions.proxyConfig; mergedOptions.proxyConfig.enabled = !!ajax; // 不自动加载数据, 由组件控制 mergedOptions.proxyConfig.autoLoad = false; } if (mergedOptions.pagerConfig) { const mobileLayouts = [ 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', ] as any; const layouts = [ 'Total', 'Sizes', 'Home', ...mobileLayouts, 'End', ] as readonly string[]; mergedOptions.pagerConfig = mergeWithArrayOverride( {}, mergedOptions.pagerConfig, { pageSize: 20, background: true, pageSizes: [10, 20, 30, 50, 100, 200], className: 'mt-2 w-full', layouts: isMobile.value ? mobileLayouts : layouts, size: 'mini' as const, }, ); } if ( mergedOptions.virtualYConfig?.enabled && mergedOptions.rowConfig?.height === 'auto' ) { // Virtual scrolling assumes fixed row height; auto height can clip rows. mergedOptions.virtualYConfig.enabled = false; } if (mergedOptions.formConfig) { mergedOptions.formConfig.enabled = false; } return mergedOptions; }); function onToolbarToolClick(event: VxeGridDefines.ToolbarToolClickEventParams) { if (event.code === 'search') { onSearchBtnClick(); } ( gridEvents.value?.toolbarToolClick as VxeGridListeners['toolbarToolClick'] )?.(event); } function onSearchBtnClick() { props.api?.toggleSearchForm?.(); } const events = computed(() => { return { ...gridEvents.value, toolbarToolClick: onToolbarToolClick, }; }); const delegatedSlots = computed(() => { const resultSlots: string[] = []; for (const key of Object.keys(slots)) { if ( !['empty', 'form', 'loading', TOOLBAR_ACTIONS, TOOLBAR_TOOLS].includes( key, ) ) { resultSlots.push(key); } } return resultSlots; }); const delegatedFormSlots = computed(() => { const resultSlots: string[] = []; for (const key of Object.keys(slots)) { if (key.startsWith(FORM_SLOT_PREFIX)) { resultSlots.push(key); } } return resultSlots.map((key) => key.replace(FORM_SLOT_PREFIX, '')); }); const showDefaultEmpty = computed(() => { // 检查是否有原生的 VXE Table 空状态配置 const hasEmptyText = options.value.emptyText !== undefined; const hasEmptyRender = options.value.emptyRender !== undefined; // 如果有原生配置，就不显示默认的空状态 return !hasEmptyText && !hasEmptyRender; }); async function init() { await nextTick(); const globalGridConfig = VxeUI?.getConfig()?.grid ?? {}; const defaultGridOptions: VxeTableGridProps = mergeWithArrayOverride( {}, toRaw(gridOptions.value), toRaw(globalGridConfig), ); // 内部主动加载数据，防止form的默认值影响 const autoLoad = defaultGridOptions.proxyConfig?.autoLoad; const enableProxyConfig = options.value.proxyConfig?.enabled; if (enableProxyConfig && autoLoad) { props.api.grid.commitProxy?.( 'query', formOptions.value ? ((await formApi.getValues()) ?? {}) : {}, ); // props.api.reload(formApi.form?.values ?? {}); } // form 由 vben-form代替，所以不适配formConfig，这里给出警告 const formConfig = gridOptions.value?.formConfig; // 处理某个页面加载多个Table时，第2个之后的Table初始化报出警告 // 因为第一次初始化之后会把defaultGridOptions和gridOptions合并后缓存进State if (formConfig && formConfig.enabled) { console.warn( '[Vben Vxe Table]: The formConfig in the grid is not supported, please use the `formOptions` props', ); } props.api?.setState?.({ gridOptions: defaultGridOptions }); // form 由 vben-form 代替，所以需要保证query相关事件可以拿到参数 extendProxyOptions(props.api, defaultGridOptions, () => formApi.getLatestSubmissionValues(), ); } // formOptions支持响应式 watch( formOptions, () => { formApi.setState((prev) => { const finalFormOptions: VbenFormProps = mergeWithArrayOverride( {}, formOptions.value, prev, ); return { ...finalFormOptions, collapseTriggerResize: !!finalFormOptions.showCollapseButton, }; }); }, { immediate: true, }, ); const isCompactForm = computed(() => { return formApi.getState()?.compact; }); onMounted(() => { props.api?.mount?.(gridRef.value, formApi); init(); }); onUnmounted(() => { formApi?.unmount?.(); props.api?.unmount?.(); }); </script>

{{ tableTitle }} {{ tableTitleHelp }}

  <!-- 继承默认的slot -->
  <template
    v-for="slotName in delegatedSlots"
    :key="slotName"
    #[slotName]="slotProps"
  >
    <slot :name="slotName" v-bind="slotProps"></slot>
  </template>
  <template #toolbar-tools="slotProps">
    <slot name="toolbar-tools" v-bind="slotProps"></slot>
    <VxeButton
      icon="vxe-icon-search"
      circle
      class="ml-2"
      v-if="gridOptions?.toolbarConfig?.search && !!formOptions"
      :status="showSearchForm ? 'primary' : undefined"
      :title="$t('common.search')"
      @click="onSearchBtnClick"
    />
  </template>

  <!-- form表单 -->
  <template #form>
    <div
      v-if="formOptions"
      v-show="showSearchForm !== false"
      :class="
        cn(
          'relative rounded py-3',
          isCompactForm
            ? isSeparator
              ? 'pb-8'
              : 'pb-4'
            : isSeparator
              ? 'pb-4'
              : 'pb-0',
        )
      "
    >
      <slot name="form">
        <Form>
          <template
            v-for="slotName in delegatedFormSlots"
            :key="slotName"
            #[slotName]="slotProps"
          >
            <slot
              :name="`${FORM_SLOT_PREFIX}${slotName}`"
              v-bind="slotProps"
            ></slot>
          </template>
          <template #reset-before="slotProps">
            <slot name="reset-before" v-bind="slotProps"></slot>
          </template>
          <template #submit-before="slotProps">
            <slot name="submit-before" v-bind="slotProps"></slot>
          </template>
          <template #expand-before="slotProps">
            <slot name="expand-before" v-bind="slotProps"></slot>
          </template>
          <template #expand-after="slotProps">
            <slot name="expand-after" v-bind="slotProps"></slot>
          </template>
        </Form>
      </slot>
      <div
        v-if="isSeparator"
        :style="{
          ...(separatorBg ? { backgroundColor: separatorBg } : undefined),
        }"
        class="bg-background-deep z-100 absolute -left-2 bottom-1 h-2 w-[calc(100%+1rem)] overflow-hidden md:bottom-2 md:h-3"
      ></div>
    </div>
  </template>
  <!-- loading -->
  <template #loading>
    <slot name="loading">
      <VbenLoading :spinning="true" />
    </slot>
  </template>
  <!-- 统一控状态 -->
  <template v-if="showDefaultEmpty" #empty>
    <slot name="empty">
      <EmptyIcon class="mx-auto" />
      <div class="mt-2">{{ $t('common.noData') }}</div>
    </slot>
  </template>
</VxeGrid>

[M69W]

大哥，这几乎没法看呀

你那边改后， 终端那里 git diff *.vue 后复制一下。
然后这里 用一对【```】包着代码

[SingingHan]

diff --git a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
index 7b002a20..43d3714b 100644
--- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
+++ b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
@@ -226,6 +226,13 @@ const options = computed(() => {
       },
     );
   }
+  if (
+    mergedOptions.virtualYConfig?.enabled &&
+    mergedOptions.rowConfig?.height === 'auto'
+  ) {
+    // Virtual scrolling assumes fixed row height; auto height can clip rows.
+    mergedOptions.virtualYConfig.enabled = false;
+  }
   if (mergedOptions.formConfig) {
     mergedOptions.formConfig.enabled = false;
   }

抱歉, 第一次提, 不太会