# 级联选择视图 CascaderView

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/cascader-view
- 资源: Ant Design Mobile (https://jiguang132.com/zh/resources/ant-design-mobile.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design-mobile/docs.md

CascaderView 是 [Cascader](/zh/components/cascader) 的内容区域。

## 安装

```bash
npm install antd-mobile@5.43.0
```

antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 `unstableSetRender` 注册 `createRoot`，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 `<html data-prefers-color-scheme="dark">` 切换。

示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 `DemoBlock` 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。

CascaderView 是 [Cascader](/zh/components/cascader) 的内容区域。

## 示例

## CascaderView

### 属性

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| activeIcon | 选中图标 | `ReactNode` | - |
| defaultValue | 默认选中项 | `CascaderValue[]` | `[]` |
| fieldNames | 自定义 options 中 label value disabled children 的字段 | `{ label: string, value: string, disabled: string, children: string }` | `{ label: 'label', value: 'value',disabled:'disabled', children: 'children' }` |
| onChange | 选项改变时触发 | `(value: CascaderValue[], extend: CascaderValueExtend) => void` | - |
| onTabsChange | 切换面板的回调 | `(index: number) => void` | - |
| options | 配置每一列的选项 | `CascaderOption[]` | - |
| placeholder | 未选中时的提示文案 | `string` \| `(index: number) => string` | `'请选择'` |
| value | 选中项 | `CascaderValue[]` | - |
| loading | 开启骨架屏 | `boolean` | `false` |
| optionRender | 自定义选项的渲染函数 | `(option: CascaderOption, info: { depth: number, active: boolean }) => ReactNode` | - |

关于 `CascaderValue` `CascaderOption[]` `CascaderValueExtend` 的类型定义，请参考 [Cascader](/zh/components/cascader#api) 的文档。

### 加载中 <Experimental></Experimental>

你可以把 `CascaderView.optionSkeleton` 作为 `CascaderOption[]` 传入到 CascaderView 的 `options` 属性或者是 `CascaderOption` 的 `children` 中。CascaderView 会将其识别并显示出骨架屏效果。

### CSS 变量

| 属性     | 说明 | 默认值  |
| -------- | ---- | ------- |
| --height | 高度 | `240px` |

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt