-
Notifications
You must be signed in to change notification settings - Fork 8k
fix: vxeTable search button not working with slot #5678
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
WalkthroughThe pull request modifies the vxe-grid component in the Vue project by updating the search functionality. It imports a new VxeButton, updates the search button’s icon property, and adds a new method Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant TB as Toolbar Component
participant API as API
U->>TB: Click Search Button
TB->>TB: onToolbarToolClick()
TB->>TB: onSearchBtnClick()
TB->>API: toggleSearchForm()
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/effects/plugins/src/vxe-table/use-vxe-grid.vue (1)
356-367
: Great implementation of the toolbar-tools slot.This implementation properly addresses both issues mentioned in the PR:
- It ensures the search icon displays when using the toolbar-tools slot
- It maintains consistent styling with other tool buttons
The implementation also preserves any user-defined toolbar-tools content by including the slot before adding the search button.
Consider extracting the icon name 'vxe-icon-search' to a constant that can be shared between this implementation and the toolbarOptions computed property to avoid potential inconsistencies in the future:
+const SEARCH_ICON = 'vxe-icon-search'; // Then in toolbarOptions computed property: const searchBtn: VxeToolbarPropTypes.ToolConfig = { code: 'search', - icon: 'vxe-icon-search', + icon: SEARCH_ICON, circle: true, status: showSearchForm.value ? 'primary' : undefined, title: $t('common.search'), }; // And in the template: <VxeButton - icon="vxe-icon-search" + icon={SEARCH_ICON} circle class="ml-2" v-if="gridOptions?.toolbarConfig?.search && !!formOptions" :status="showSearchForm ? 'primary' : undefined" :title="$t('common.search')" @click="onSearchBtnClick" />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
(5 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: Check (windows-latest)
- GitHub Check: Test (windows-latest)
- GitHub Check: Lint (windows-latest)
- GitHub Check: post-update (windows-latest)
- GitHub Check: post-update (ubuntu-latest)
🔇 Additional comments (5)
packages/effects/plugins/src/vxe-table/use-vxe-grid.vue (5)
36-36
: Good addition of the VxeButton import.The import of
VxeButton
from 'vxe-pc-ui' is necessary to support the new implementation of the search button in the toolbar-tools slot.
118-118
: Fixed icon name from 'vxe-icon--search' to 'vxe-icon-search'.This change corrects the icon name to the proper format, which addresses the issue with the search icon not displaying properly.
204-204
: Good refactoring to use the dedicated onSearchBtnClick method.Extracting this functionality to a separate method improves code organization and maintainability.
211-213
: Well-structured encapsulation of the search toggle functionality.Creating a dedicated method for this action follows good software design principles and makes the code more maintainable.
225-230
: Correctly excludes TOOLBAR_TOOLS from delegated slots.This change is necessary to prevent conflicts with the custom implementation of the toolbar-tools slot.
Description
修复为vxeTable扩展的搜索图标在使用toolbar-tools插槽时不再显示的问题;
修复搜索图标颜色与其它的默认工具按钮颜色不一致的问题
fix: #5673
Type of change
Please delete options that are not relevant.
pnpm-lock.yaml
unless you introduce a new test example.Checklist
pnpm run docs:dev
command.pnpm test
.feat:
,fix:
,perf:
,docs:
, orchore:
.Summary by CodeRabbit