Skip to content

feat(Cascader): add filterable search support#4453

Open
kk-418 wants to merge 2 commits into
Tencent:developfrom
kk-418:feat/cascader-filterable
Open

feat(Cascader): add filterable search support#4453
kk-418 wants to merge 2 commits into
Tencent:developfrom
kk-418:feat/cascader-filterable

Conversation

@kk-418
Copy link
Copy Markdown

@kk-418 kk-418 commented May 18, 2026

Closes #4431

Summary

Cascader 组件新增搜索能力,解决数据层级深时用户逐级查找成本高的痛点。

  • 新增 props:filterable / filter / filter-placeholder
  • 顶部内嵌 t-search,输入关键字后将层级面板切换为扁平的「完整路径」列表
  • 默认匹配规则参考 ant-designshowSearch:路径中所有 label 拼接(含叶子 text)做大小写不敏感 includes 匹配
  • 命中字符高亮,路径以 / 分隔;空匹配时展示 globalConfig.empty 提示
  • 选中扁平结果会还原 selectedIndexesitemsstepIndex,再触发原有 change 事件,行为与逐级选择一致
  • 新增 7 个 --td-cascader-filter-* CSS 变量,沿用现有 --td-cascader-active-color 主题色
  • 8 个语言包同步补全 filterPlaceholder / empty 文案

Example

<t-cascader
  visible="{{visible}}"
  value="{{value}}"
  options="{{options}}"
  title="请选择地址"
  filterable
  filter-placeholder="搜索省/市/区"
  bind:change="onChange"
/>

自定义匹配(如拼音、远程匹配):

Component({
  data: {
    filter(keyword, option, path) {
      return path.some((node) => node.pinyin?.includes(keyword));
    },
  },
});

Test plan

  • pnpm lint 通过
  • pnpm test 全量通过:133 suites / 703 tests / 384 snapshots
  • 新增 6 个 filterable 单测(默认匹配 / 空匹配 / 清空 / 自定义 filter / 选中扁平结果 / 实例数据状态)
  • config-provider 快照已同步(locale 增加 filterPlaceholderempty
  • 在微信开发者工具内打开 _example,进入 Cascader → "支持搜索" demo 手动验证

Screenshots

image

- 新增 props:filterable / filter / filter-placeholder,开启后顶部展示 t-search 搜索框
- 默认匹配规则参考 ant-design:路径中所有 label 拼接 + 叶子节点 text,做大小写不敏感 includes 匹配
- 命中字用高亮样式(沿用 --td-cascader-active-color,新增 7 个相关 CSS 变量)
- 选中扁平结果保留完整路径,自动更新 step/tab 视图后触发 change
- 新增 filterable demo、API 文档、6 个单测、8 个语言包补全 filterPlaceholder/empty 文案
将搜索框移入 __content 内部,使弹层总高度回归到 title + 78vh,
不再因新增搜索条而超出安全区。同时在 initOptionsHeight / updateOptionsHeight
中扣除 filterHeight,保证选项滚动区高度计算正确。
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 18, 2026

Open in StackBlitz

npm i https://pkg.pr.new/tdesign-miniprogram@4453
npm i https://pkg.pr.new/@tdesign/uniapp@4453
npm i https://pkg.pr.new/@tdesign/uniapp-chat@4453

commit: 63d3278

@tdesign-bot
Copy link
Copy Markdown
Collaborator

TDesign Component Site Preview Open

Component Preview
tdesign-miniprogram 完成
@tdesign-miniprogram/chat 完成
tdesign-uniapp 完成
tdesign-uniapp-chat 完成

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.

[Cascader] 支持搜索功能

3 participants