表单 / 12
TreeSelect · 级联
层级数据的五种选法：下拉里放一棵树、三列级联、城市面板、输入即补全、以及原生 datalist。选完之后都能在输入框里回显路径。
树形下拉 TreeSelect
.dd + .dd-menu + .tree选择所属部门 · 单选树
点击带箭头的节点展开/收起，叶子节点直接可选；.dd-menu 内嵌 .tree 时把宽度设为 300px 以上，避免深层节点换行。
选择可见模块 · 复选树
复选只挂在叶子节点上：父节点保留展开/收起语义，父级的选中数量用 .tag 汇总展示，避免点击冲突。
级联选择 Cascader
.casc / .casc-col / .casc-item商品类目 · 三列级联
服饰鞋包
数码家电
美妆个护
食品生鲜
家居生活
男装
女装
童装
运动鞋服
箱包配饰
T 恤
衬衫
连衣裙
半身裙
外套
针织衫
三列容器共用一条外边框，列之间是 1px 细分隔线；每一列内部互斥选中，上一列的选中值决定下一列的内容。
行业赛道 · 带图标的两列级联
企业服务
人工智能
消费零售
内容传媒
协同办公
数据平台
云原生基础设施
人力与财税
客户成功
只有两列时需要留白
列宽固定 170px 并让容器左对齐，避免最后一列被拉得很宽而显得空。
城市面板 · 自动补全
.city-panel / .ac-box / datalist城市地区选择
📍
热
北京
上海
广州
深圳
杭州
成都
武汉
西安
A
鞍山
安庆
安阳
安顺
B
北京
包头
蚌埠
保定
本溪
C
成都
重庆
长沙
长春
常州
S
上海
深圳
苏州
沈阳
石家庄
左侧字母固定 44px 宽并带浅灰底，右侧城市标签自动换行；点击标签即可选中。
自动补全
陈陈嘉明 · chen.jiaming@xinghai.com
陈陈思远 · chen.siyuan@xinghai.com
陈陈可欣 · chen.kexin@xinghai.com
设计令牌
组件库
设计系统
深色模式
原生 datalist 方案（可搜索 select）
不依赖脚本的原生方案，移动端自带滚轮选择器，适合城市、机场、单位这类固定词表。
回显与已选标签
.tag-input / .chip
服饰 / 女装 / 连衣裙
数码 / 手机 / 旗舰机
美妆 / 护肤 / 精华
多值用 .chip 逐个展示，每个都自带移除按钮。
华东上海市 / 江苏省 / 浙江省
华南广东省 / 福建省 / 广西壮族自治区
西南四川省 / 云南省 / 重庆市
选择结果可直接用于筛选条件或保存为订阅