fix: vxeTable search button not working with slot (#5678)
This commit is contained in:
parent
b37ed48b9d
commit
89d963c81a
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user