Skip to content

feat(cascader): Add dropdownRender Support(#7853)#8456

Open
rylwl wants to merge 1 commit intovueComponent:mainfrom
rylwl:ft-cascader-dropdownRender
Open

feat(cascader): Add dropdownRender Support(#7853)#8456
rylwl wants to merge 1 commit intovueComponent:mainfrom
rylwl:ft-cascader-dropdownRender

Conversation

@rylwl
Copy link

@rylwl rylwl commented Jan 8, 2026

首先,感谢你的贡献! 😄

新特性请提交至 feature 分支,其余可提交至 main 分支。在一个维护者审核通过后合并。请确保填写以下 pull request 的信息,谢谢!~

[English Template / 英文模板]

这个变动的性质是

  • 新特性提交
  • 日常 bug 修复
  • 站点、文档改进
  • 组件样式改进
  • TypeScript 定义更新
  • 重构
  • 代码风格优化
  • 分支合并
  • 其他改动(是关于什么的改动?)

需求背景

  1. 描述相关需求的来源。
    用户希望 Cascader 组件能够支持自定义下拉菜单内容,类似于 Select 组件的 dropdownRender 功能,以便在级联选择器的下拉菜单中添加额外的自定义内容(如页脚、按钮等)。
  2. 要解决的问题。
    Cascader 组件目前不支持通过 slot 方式自定义下拉菜单内容,导致用户无法灵活扩展下拉菜单的 UI。而 Select 组件已经支持 dropdownRender 功能,Cascader 应该保持一致的 API 设计。
  3. 相关的 issue 讨论链接。
    #7853
    #8457

实现方案和 API(非新功能可选)

  1. 基本的解决思路和其他可选方案。
    方案:参考 Cascader 组件的已有的tagRender实现,在 Cascader 组件中同时支持 prop 和 slot 两种方式的 dropdownRender
  1. 列出最终的 API 实现和用法。
    同Select组件一样
<Cascader>
  <template #dropdownRender="{ menuNode: menu }">
    <v-nodes :vnodes="menu" />
    <a-divider style="margin: 4px 0" />
    <div style="padding: 8px">自定义内容</div>
  </template>
</Cascader>
  1. 涉及 UI/交互变动需要有截图或 GIF。
    新增了 dropdownRender demo,展示了如何在下拉菜单底部添加自定义内容。
image

对用户的影响和可能的风险(非新功能可选)

  1. 这个改动对用户端是否有影响?影响的方面有哪些?
    这是一个纯新增功能,不影响现有用户的使用。用户可以自由选择是否使用 dropdownRender。
  1. 是否有可能隐含的 break change 和其他风险?
    无 break change。新增的功能向后兼容,不改变现有 API。

Changelog 描述(非新功能可选)

  1. 英文描述
    Cascader: Add dropdownRender slot support for customizing dropdown content.
  1. 中文描述(可选)
    Cascader: 新增 dropdownRender 插槽支持,允许自定义下拉菜单内容。

请求合并前的自查清单

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

后续计划(非新功能可选)

如果这个提交后面还有相关的其他提交和跟进信息,可以写在这里。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant