fix(ma-dict-select): 修复 slot 透传并支持自定义 option 渲染#698
Conversation
…and support custom option slot
📝 WalkthroughWalkthrough在 ma-dict-select.vue 中,动态命名插槽的渲染改为为每个插槽生成并传递独立的 Changes
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
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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.
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. Comment |
web/src/components/ma-dict-picker/ma-dict-select.vue变更概述
Object.keys($slots),过滤default与optionDefault,将其余具名插槽原样透传到内部el-select。optionDefault插槽,分组与普通选项均可自定义渲染。变更前的问题
prefix、empty等)无法在内部el-select生效。变更后的行为
el-select,prefix、empty、loading等可正常使用。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
新功能
改进