fix: vxeTable search button not working with slot (#5678)

This commit is contained in:
Netfan 2025-03-07 22:35:09 +08:00 committed by GitHub
parent b37ed48b9d
commit 89d963c81a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -33,6 +33,7 @@ import { cloneDeep, cn, mergeWithArrayOverride } from '@vben/utils';
import { VbenHelpTooltip, VbenLoading } from '@vben-core/shadcn-ui'; import { VbenHelpTooltip, VbenLoading } from '@vben-core/shadcn-ui';
import { VxeButton } from 'vxe-pc-ui';
import { VxeGrid, VxeUI } from 'vxe-table'; import { VxeGrid, VxeUI } from 'vxe-table';
import { extendProxyOptions } from './extends'; import { extendProxyOptions } from './extends';
@ -114,7 +115,7 @@ const toolbarOptions = computed(() => {
const slotTools = slots[TOOLBAR_TOOLS]?.(); const slotTools = slots[TOOLBAR_TOOLS]?.();
const searchBtn: VxeToolbarPropTypes.ToolConfig = { const searchBtn: VxeToolbarPropTypes.ToolConfig = {
code: 'search', code: 'search',
icon: 'vxe-icon--search', icon: 'vxe-icon-search',
circle: true, circle: true,
status: showSearchForm.value ? 'primary' : undefined, status: showSearchForm.value ? 'primary' : undefined,
title: $t('common.search'), title: $t('common.search'),
@ -200,13 +201,17 @@ const options = computed(() => {
function onToolbarToolClick(event: VxeGridDefines.ToolbarToolClickEventParams) { function onToolbarToolClick(event: VxeGridDefines.ToolbarToolClickEventParams) {
if (event.code === 'search') { if (event.code === 'search') {
props.api?.toggleSearchForm?.(); onSearchBtnClick();
} }
( (
gridEvents.value?.toolbarToolClick as VxeGridListeners['toolbarToolClick'] gridEvents.value?.toolbarToolClick as VxeGridListeners['toolbarToolClick']
)?.(event); )?.(event);
} }
function onSearchBtnClick() {
props.api?.toggleSearchForm?.();
}
const events = computed(() => { const events = computed(() => {
return { return {
...gridEvents.value, ...gridEvents.value,
@ -218,7 +223,11 @@ const delegatedSlots = computed(() => {
const resultSlots: string[] = []; const resultSlots: string[] = [];
for (const key of Object.keys(slots)) { for (const key of Object.keys(slots)) {
if (!['empty', 'form', 'loading', TOOLBAR_ACTIONS].includes(key)) { if (
!['empty', 'form', 'loading', TOOLBAR_ACTIONS, TOOLBAR_TOOLS].includes(
key,
)
) {
resultSlots.push(key); resultSlots.push(key);
} }
} }
@ -344,6 +353,18 @@ onUnmounted(() => {
> >
<slot :name="slotName" v-bind="slotProps"></slot> <slot :name="slotName" v-bind="slotProps"></slot>
</template> </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表单 --> <!-- form表单 -->
<template #form> <template #form>