Skip to content

fix(ma-dict-select): 修复 slot 透传并支持自定义 option 渲染#698

Merged
kanyxmo merged 2 commits into
mineadmin:masterfrom
westng:fix/ma-dict-select
Sep 16, 2025
Merged

fix(ma-dict-select): 修复 slot 透传并支持自定义 option 渲染#698
kanyxmo merged 2 commits into
mineadmin:masterfrom
westng:fix/ma-dict-select

Conversation

@westng

@westng westng commented Sep 16, 2025

Copy link
Copy Markdown
Member
  • 影响范围: web/src/components/ma-dict-picker/ma-dict-select.vue
  • 类型: 修复(兼容增强)

变更概述

  • 修复 slot 透传问题:遍历 Object.keys($slots),过滤 defaultoptionDefault,将其余具名插槽原样透传到内部 el-select
  • 支持自定义选项渲染:新增 optionDefault 插槽,分组与普通选项均可自定义渲染。
  • 保持兼容:未提供自定义插槽时,延用原有 label/i18n 渲染逻辑。

变更前的问题

  • 外部具名插槽(如 prefixempty 等)无法在内部 el-select 生效。
  • 选项行无法统一便捷地进行自定义渲染。

变更后的行为

  • 所有非默认具名插槽会自动转发到 el-selectprefixemptyloading 等可正常使用。
  • 通过 optionDefault 插槽可统一自定义选项节点(兼容分组与普通项)。

使用示例

{
      label: '业绩分类',
      prop: 'performance_id',
      render: () => MaDictSelect,
      renderProps: {
        dictName: 'PERF_TYPE',
        // multiple: true,
        clearable: true,
        placeholder: t('form.pleaseInput', { msg: '业绩分类' }),
      },
      renderSlots: {
        optionDefault: ({ option }: { option: any }) => {
          // 自定义显示方式
          return `${option.label} (${option.value})`
        },
        label: ({ label, value }: { label: string, value: any }) => {
          return `${label} (${value})`
        },
      },
    },

Summary by CodeRabbit

  • 新功能

    • 动态命名插槽现支持每个插槽的作用域数据(slot props),可在自定义插槽内容中访问当前项信息,默认与 optionDefault 插槽行为保持兼容。
  • 改进

    • 渲染更可预测、更新更稳定,便于基于插槽内容进行精细化定制。

@dosubot dosubot Bot added the size:XS This PR changes 0-9 lines, ignoring generated files. label Sep 16, 2025
@coderabbitai

coderabbitai Bot commented Sep 16, 2025

Copy link
Copy Markdown
📝 Walkthrough

Walkthrough

在 ma-dict-select.vue 中,动态命名插槽的渲染改为为每个插槽生成并传递独立的 slotProps(通过 #[slot]="slotProps" 和内部 <slot :name="slot" v-bind="slotProps">),并在 v-for 中直接排除 default/optionDefault 并为模板项添加 :key

Changes

Cohort / File(s) Summary
Vue 插槽作用域增强
web/src/components/ma-dict-picker/ma-dict-select.vue
v-for 过滤仅遍历非 default/optionDefault 的命名插槽并添加 :key;将 #[slot] 改为 #[slot]="slotProps",内部使用 <slot :name="slot" v-bind="slotProps"> 转发每个插槽的作用域数据。

Sequence Diagram(s)

sequenceDiagram
    participant P as 父组件
    participant S as ma-dict-select
    participant C as 插槽内容(子节点)

    Note over S: 遍历命名插槽(排除 default/optionDefault),为每个插槽生成 slotProps 并绑定 key

    P->>S: 渲染 ma-dict-select
    loop 对每个命名插槽 slot
        S->>S: 生成 slotProps(每-slot 作用域数据)
        S-->>C: 转发 <slot :name="slot" v-bind="slotProps">(通过 #[slot]="slotProps")
        C-->>S: 使用 slotProps 渲染内容
    end
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

Suggested labels

size:M

Suggested reviewers

  • zds-s

Poem

我在字典林里跳一跳,耳朵竖得高
每个插槽分颗豆,slotProps 全带好
名字一喊就到齐,默认静静绕
数据轻轻递过去,渲染笑得俏
胡萝卜编译通过,前端更欢畅 🥕🐇

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed 标题 "fix(ma-dict-select): 修复 slot 透传并支持自定义 option 渲染" 简洁且直接概述了变更的主要目的:修复 slot 转发问题并新增自定义 option 渲染支持,且明确指出了受影响的组件(ma-dict-select)和变更类型(fix),便于在提交历史中快速识别。标题没有使用模糊或冗余的词汇,语义与提供的变更摘要和目标一致。基于提供的 <raw_summary> 和 <pr_objectives>,标题准确反映了主要改动。
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
✨ Finishing touches
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c136790 and 6fbe4b7.

📒 Files selected for processing (1)
  • web/src/components/ma-dict-picker/ma-dict-select.vue (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • web/src/components/ma-dict-picker/ma-dict-select.vue

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

  • Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
  • Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.


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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@dosubot dosubot Bot added the bug label Sep 16, 2025

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 88437ff and c136790.

📒 Files selected for processing (1)
  • web/src/components/ma-dict-picker/ma-dict-select.vue (1 hunks)

Comment thread web/src/components/ma-dict-picker/ma-dict-select.vue Outdated
@dosubot dosubot Bot added size:S This PR changes 10-29 lines, ignoring generated files. and removed size:XS This PR changes 0-9 lines, ignoring generated files. labels Sep 16, 2025
@kanyxmo
kanyxmo merged commit 269c514 into mineadmin:master Sep 16, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Frontend size:S This PR changes 10-29 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants