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 { VxeButton } from 'vxe-pc-ui';
import { VxeGrid, VxeUI } from 'vxe-table';
import { extendProxyOptions } from './extends';
@ -114,7 +115,7 @@ const toolbarOptions = computed(() => {
const slotTools = slots[TOOLBAR_TOOLS]?.();
const searchBtn: VxeToolbarPropTypes.ToolConfig = {
code: 'search',
icon: 'vxe-icon--search',
icon: 'vxe-icon-search',
circle: true,
status: showSearchForm.value ? 'primary' : undefined,
title: $t('common.search'),
@ -200,13 +201,17 @@ const options = computed(() => {
function onToolbarToolClick(event: VxeGridDefines.ToolbarToolClickEventParams) {
if (event.code === 'search') {
props.api?.toggleSearchForm?.();
onSearchBtnClick();
}
(
gridEvents.value?.toolbarToolClick as VxeGridListeners['toolbarToolClick']
)?.(event);
}
function onSearchBtnClick() {
props.api?.toggleSearchForm?.();
}
const events = computed(() => {
return {
...gridEvents.value,
@ -218,7 +223,11 @@ const delegatedSlots = computed(() => {
const resultSlots: string[] = [];
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);
}
}
@ -344,6 +353,18 @@ onUnmounted(() => {
>
<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>