fix: 修复MaProTable案例中搜索暂开收起错误 #39
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@westng is attempting to deploy a commit to the deathsatan's projects Team on Vercel. A member of the Team first needs to authorize it. |
Walkthrough在多个演示与文档中调整了表单/表格示例：移除与细化样式；为基础与高级搜索示例新增本地过滤逻辑与搜索项；高级搜索将数值区间改为 children 组合渲染，更新 schema 暴露方式与搜索配置；中文文档同步更新示例与说明。 Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User as 用户
participant Form as 高级搜索表单(schema: ref)
participant Table as MaProTable
participant Fn as getAdvancedList/filterData
User->>Form: 输入/修改搜索条件
User->>Table: 点击「立即搜索」/「展开更多条件」
Table->>Fn: getAdvancedList(params)
Fn->>Fn: filterData(多条件本地过滤)
Fn-->>Table: { list, total }
Table-->>User: 渲染过滤后的列表
User->>Form: 点击「重置条件」
Form->>Form: onSearchReset(重置 formData)
Form->>Table: tableRef.refresh()
Table->>Fn: getAdvancedList({})
Fn-->>Table: { list, total（全量） }
Table-->>User: 渲染重置结果
sequenceDiagram
autonumber
actor User as 用户
participant Form as 基础搜索表单
participant Table as MaProTable
participant Fn as getBasicList
User->>Form: 输入搜索条件（含新增「职位」）
User->>Table: 触发搜索
Table->>Fn: getBasicList(params)
Fn->>Fn: 从 schema.searchItems 推导字段并本地过滤
Fn-->>Table: Promise.resolve({ list, total })
Table-->>User: 渲染结果
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
✨ Finishing Touches🧪 Generate unit tests
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:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
❌ Deploy Preview for super-cobbler-53ff65 failed. Why did it fail? →
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
docs/zh/front/component/ma-pro-table/examples/advanced-search.md (1)
212-216: “options 放置位置”的说明与示例/演示不一致本页“选择器组件”示例将 options 写在项根部；演示 .vue 文件将 options 放于 renderProps.options。建议统一到 renderProps.options，并在要点中修正描述。
-- `options` 数组直接配置在搜索项中，不需要嵌套在 `renderProps` 内 +- `options` 推荐放在 `renderProps.options` 中（与演示保持一致）；如 `multiple`、`placeholder` 等同样置于 `renderProps`。
🧹 Nitpick comments (13)
docs/zh/front/component/ma-pro-table/examples/advanced-search.md (6)
67-94: 数值区间 children 示例与演示实现不一致（缺少 isPadding，建议补充边界约束）示例未加 isPadding，而演示文件 index.vue 使用了 isPadding 并在样式中去除内边距；此外建议为 InputNumber 增加 min/max 以避免负值或过大值输入。
可按演示对齐并补充边界：
{ label: '薪资范围', prop: 'salaryRange', - render: () => <div class="!p-0 flex gap-2 w-full" />, + render: () => <div class="!p-0 flex gap-2 w-full isPadding" />, children: [ { prop: 'salaryMin', render: 'InputNumber', renderProps: { controlsPosition: 'right', placeholder: '最低薪资', + min: 0, + max: 100000, }, cols: { md: 12, xs: 24 }, }, { prop: 'salaryMax', render: 'InputNumber', renderProps: { controlsPosition: 'right', placeholder: '最高薪资', + min: 0, + max: 100000, }, cols: { md: 12, xs: 24 }, }, ], },
116-133: 与演示保持一致：滑块补齐 size: 'small'演示中将工作经验滑块设置为小尺寸；文档段落建议同步，避免视觉不一致。
renderProps: { + size: 'small', min: 0, max: 15, range: true,
171-208: span 与 cols 并存的布局表述需要澄清前文数字区间采用 children + cols，而此处 JSX 示例使用 span: 2。两者均可，但建议说明“复杂组合建议用 children+cols，单项用 span”，以免读者混淆。
251-264: 进度条颜色分级与演示不一致，建议统一为三档演示采用 >=90 绿色、>=80 橙色、否则红色；文档为两档。建议统一，避免用户困惑。
cellRender: ({ row }) => ( <el-progress percentage={row.performance} - color={row.performance >= 90 ? '#67c23a' : '#e6a23c'} + color={row.performance >= 90 ? '#67c23a' : row.performance >= 80 ? '#e6a23c' : '#f56c6c'} stroke-width={8} text-inside /> )
268-283: 列表渲染 key 不应使用索引用索引作为 key 会影响标签复用与渲染性能。建议使用稳定值 skill。
- {row.skills.map((skill, index) => ( - <el-tag key={index} size="small" style="margin-right: 4px;"> + {row.skills.map((skill) => ( + <el-tag key={skill} size="small" style="margin-right: 4px;"> {skill} </el-tag> ))}
66-68: 版本要求提示很及时，建议同时标注 Pro-Table 版本区间children 方案依赖 @mineadmin/form >=1.0.53；若对 MaProTable 本体也有最低版本约束，建议在此处一并标注，减少使用方踩坑。
docs/demos/ma-pro-table-examples/basic/index.vue (2)
18-46: getBasicList 依赖外部 schema，增加容错并精确匹配 select 字段当前在 API 内引用外部 schema.searchItems，理论上安全，但建议加容错；同时对下拉选择字段（department/position）更符合预期的是“精确匹配”，而非包含匹配。
const getBasicList = async (params: Record<string, any>) => { @@ - // 获取搜索字段列表 - const searchFields = schema.searchItems.map(item => item.prop) + // 获取搜索字段列表（容错：schema 可能暂不可用） + const searchFields = Array.isArray(schema?.searchItems) + ? schema.searchItems.map(item => item.prop) + : Object.keys(params) @@ - // 只过滤搜索字段 + // 只过滤搜索字段；select 字段精确匹配 const filtered = data.filter(item => { return searchFields.every(key => { const value = params[key] - if (!value) return true - return item[key]?.toString().includes(value) + if (value == null || value === '') return true + if (['department', 'position'].includes(key)) { + return item[key] === value + } + return String(item[key] ?? '').includes(String(value)) }) })
81-106: options 的放置方式与文档/高级示例不一致，建议统一写在 renderProps.options此处 options 在 renderProps 内；文档“组件配置要点”目前写在项根部。建议以本实现为准，统一到 renderProps.options，并同步修改文档（已在对应 MD 提出建议）。
docs/demos/ma-pro-table-examples/advanced-search/index.vue (5)
99-101: 建议移除控制台输出或改为 debug 级别示例中保留 console.log 容易在实际接入时被带入生产，建议注释或改为 console.debug。
- console.log('高级搜索参数:', params) + // console.debug('高级搜索参数:', params)
378-384: Element Plus 单选仅需 label，移除多余 valueel-radio 以 label 作为绑定值，value 属性多余且会下发到 DOM。
- <el-radio label="" value="">全部</el-radio> - <el-radio label={1} value={1}>在职</el-radio> - <el-radio label={0} value={0}>离职</el-radio> + <el-radio label="">全部</el-radio> + <el-radio label={1}>在职</el-radio> + <el-radio label={0}>离职</el-radio>
415-423: 技能标签 key 使用稳定值而非索引索引作为 key 会影响节点复用，建议用内容值。
- {row.skills && Array.isArray(row.skills) ? row.skills.map((skill: string, index: number) => ( - <el-tag key={index} size="small" style="margin-right: 4px; margin-bottom: 2px;"> + {row.skills && Array.isArray(row.skills) ? row.skills.map((skill: string) => ( + <el-tag key={skill} size="small" style="margin-right: 4px; margin-bottom: 2px;"> {skill} </el-tag> )) : null}
429-434: 确认 cellRenderTo 是否为预期 API本列使用了 cellRenderTo 配置；文件其余位置与文档均使用 cellRender。若为新能力请在文档同步说明；若为笔误建议统一为 cellRender。
531-533: 样式去内边距与 isPadding 协同良好此样式与上方 children 容器 isPadding 搭配合理，建议在文档中一并说明（已在 MD 文件处建议补充）。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (4)
docs/demos/ma-form/conditional-rendering/index.vue(0 hunks)docs/demos/ma-pro-table-examples/advanced-search/index.vue(7 hunks)docs/demos/ma-pro-table-examples/basic/index.vue(4 hunks)docs/zh/front/component/ma-pro-table/examples/advanced-search.md(12 hunks)
💤 Files with no reviewable changes (1)
- docs/demos/ma-form/conditional-rendering/index.vue
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules - super-cobbler-53ff65
- GitHub Check: Header rules - super-cobbler-53ff65
- GitHub Check: Pages changed - super-cobbler-53ff65
🔇 Additional comments (2)
docs/demos/ma-pro-table-examples/basic/index.vue (1)
114-121: 状态列渲染很清晰使用 ElTag 区分在职/离职直观明了，保持即可。
docs/demos/ma-pro-table-examples/advanced-search/index.vue (1)
204-214: fold/cols/按钮文本配置与 PR 目标一致折叠/展开文案与折叠行为已对齐“修复展开收起错误”的目标，这里实现看起来合理。
Comment on lines
+39
to
+95
| // 通用过滤方法 | ||
| function filterData(data: any[], params: any) { | ||
| return data.filter(item => { | ||
| return Object.entries(params).every(([key, value]) => { | ||
| if (value == null || value === '' || (Array.isArray(value) && value.length === 0)) { | ||
| return true // 跳过空参数 | ||
| } | ||
| switch (key) { | ||
| case 'name': // 模糊匹配 | ||
| return item.name.includes(value) | ||
| case 'department': // 多选匹配 | ||
| return Array.isArray(value) && value.some((dep: string) => item.department.includes(dep)) | ||
| case 'salaryMin': | ||
| return item.salary >= value | ||
| case 'salaryMax': | ||
| return item.salary <= value | ||
| case 'experience': // 工作经验范围 | ||
| if (Array.isArray(value) && value.length === 2) { | ||
| const [min, max] = value | ||
| return item.experience >= min && item.experience <= max | ||
| } | ||
| return true | ||
| case 'joinDateRange': // 入职时间范围 | ||
| if (Array.isArray(value) && value.length === 2) { | ||
| const [startDate, endDate] = value | ||
| const itemDate = new Date(item.joinDate) | ||
| const start = new Date(startDate) | ||
| const end = new Date(endDate) | ||
| return itemDate >= start && itemDate <= end | ||
| } | ||
| return true | ||
| case 'level': // 职级多选 | ||
| if (Array.isArray(value) && value.length > 0) { | ||
| return value.includes(item.level) | ||
| } | ||
| return true | ||
| case 'performanceMin': | ||
| return item.performance >= value | ||
| case 'performanceMax': | ||
| return item.performance <= value | ||
| case 'status': // 精确匹配 | ||
| return item.status === value | ||
| default: | ||
| return true | ||
| } | ||
| }) | ||
| }) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
filterData 边界更健壮：经验区间乱序、日期比较的时区问题
- 经验区间若用户拖拽导致 [max, min] 乱序会误判。
- 日期用 new Date('YYYY-MM-DD') 存在跨时区歧义；给定 value-format 为 YYYY-MM-DD，可直接按字符串比较。
case 'experience': // 工作经验范围
- if (Array.isArray(value) && value.length === 2) {
- const [min, max] = value
- return item.experience >= min && item.experience <= max
- }
+ if (Array.isArray(value) && value.length === 2) {
+ const [a, b] = value
+ const min = Math.min(a, b)
+ const max = Math.max(a, b)
+ return item.experience >= min && item.experience <= max
+ }
return true
@@
- case 'joinDateRange': // 入职时间范围
- if (Array.isArray(value) && value.length === 2) {
- const [startDate, endDate] = value
- const itemDate = new Date(item.joinDate)
- const start = new Date(startDate)
- const end = new Date(endDate)
- return itemDate >= start && itemDate <= end
- }
+ case 'joinDateRange': // 入职时间范围（YYYY-MM-DD 可用字符串比较避免时区问题）
+ if (Array.isArray(value) && value.length === 2) {
+ const [startDate, endDate] = value
+ const date10 = (s: string) => s.slice(0, 10)
+ const d = date10(item.joinDate)
+ return d >= date10(startDate) && d <= date10(endDate)
+ }
return true🤖 Prompt for AI Agents
In docs/demos/ma-pro-table-examples/advanced-search/index.vue around lines 39 to
95, make the filterData logic more robust by normalizing the experience and date
ranges: for the 'experience' case, accept arrays in any order by deriving min =
Math.min(...value) and max = Math.max(...value) (also guard for non-array or
missing values) and then compare item.experience >= min && item.experience <=
max; for the 'joinDateRange' case, avoid timezone ambiguity with new
Date('YYYY-MM-DD') by either comparing the provided YYYY-MM-DD strings directly
(since value-format is YYYY-MM-DD) using string comparison
item.joinDate.slice(0,10) >= startDate && item.joinDate.slice(0,10) <= endDate,
or normalize both sides to UTC datetimes (e.g., append 'T00:00:00Z') before
creating Date objects; ensure these checks remain inclusive and still return
true when value is invalid or missing.
Comment on lines
221
to
228
| ```javascript | ||
| const options = { | ||
| searchOptions: { | ||
| showNumber: 3, // 默认显示3个搜索项 | ||
| layout: 'auto' // 布局模式：auto/inline/vertical | ||
| } | ||
| } | ||
| showNumber: 3, // 默认显示3个搜索项 | ||
| layout: "auto", // 布局模式：auto/inline/vertical | ||
| }, | ||
| }; | ||
| ``` |
There was a problem hiding this comment.
🛠️ Refactor suggestion
“展示控制”配置与演示不一致（fold/cols/text/labelWidth）
演示使用了 fold、cols 与文本按钮配置，并设置了 searchFormOptions.labelWidth；文档仍是 showNumber/layout。建议对齐。
-const options = {
- searchOptions: {
- showNumber: 3, // 默认显示3个搜索项
- layout: "auto", // 布局模式：auto/inline/vertical
- },
-};
+const options = {
+ searchFormOptions: { labelWidth: '90px' },
+ searchOptions: {
+ fold: true,
+ cols: { xs: 2, sm: 2, md: 2, lg: 2, xl: 2 },
+ text: {
+ searchBtn: () => '立即搜索',
+ resetBtn: () => '重置条件',
+ isFoldBtn: () => '展开更多条件',
+ notFoldBtn: () => '收起条件',
+ },
+ },
+};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| ```javascript | |
| const options = { | |
| searchOptions: { | |
| showNumber: 3, // 默认显示3个搜索项 | |
| layout: 'auto' // 布局模式：auto/inline/vertical | |
| } | |
| } | |
| showNumber: 3, // 默认显示3个搜索项 | |
| layout: "auto", // 布局模式：auto/inline/vertical | |
| }, | |
| }; | |
| ``` | |
| const options = { | |
| searchFormOptions: { labelWidth: '90px' }, | |
| searchOptions: { | |
| fold: true, | |
| cols: { xs: 2, sm: 2, md: 2, lg: 2, xl: 2 }, | |
| text: { | |
| searchBtn: () => '立即搜索', | |
| resetBtn: () => '重置条件', | |
| isFoldBtn: () => '展开更多条件', | |
| notFoldBtn: () => '收起条件', | |
| }, | |
| }, | |
| }; |
🤖 Prompt for AI Agents
In docs/zh/front/component/ma-pro-table/examples/advanced-search.md around lines
221-228, the options snippet uses searchOptions.showNumber/layout but the demo
shows fold, cols, text and sets searchFormOptions.labelWidth; update the snippet
to match the demo by replacing showNumber/layout with the properties fold, cols
and text under searchOptions and add searchFormOptions with labelWidth set to
the same value used in the demo so the documentation and example code are
consistent.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit