# 级联选择器 当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。 cascader级联选择器除了基础配置以外,主要的配置包含两大类:属性配置和数据配置。 ![cascader1](https://img.kancloud.cn/e4/24/e42436def9d14df3239c84070c7b4ec2_2318x1482.png "cascader1.png") ## 1、 属性配置 属性配置中包含了组件当前显示的外观及功能。当前主要包含: * 输入提示 * 是否可以多选 * 是否可以搜索 * 是否可以清除 * 是否隐藏 * 是否禁用 ## 2、 数据配置 数据配置标示了当前下拉选择器所能展示的数据。当前支持静态数据、API接口 两种输入格式的接入。 ### 静态数据 静态数据配置直接在配置上填写即可。 ![cascader2](https://img.kancloud.cn/6b/20/6b20ff60fdb1bcba2211c70f2b84c060_2305x1265.png "cascader2.png") ### API接口 API接口通过axios请求获取后端的接口数据后进行加载展示。 ***** **配置说明** **远端方法**: 远程请求的接口地址。 目前仅支持get请求。 **列表数据dataPath** 远程请求后数据很多时候并不直接就是数组,在返回的数据结构中在某个路径下才是我们需要的数据。 此处的解析依赖object-path。 举例1: ``` 假设当前的数据返回结构为 { "msg":"操作成功", "code":0, "data":[ {"id": 1 , "name": "张三"}, {"id": 2 , "name": "李四"} ] } 则此时的dataPath 应该填写为: data ``` 举例2: ``` { "msg":"操作成功", "code":0, "data":{ list: [ {"id": 1 , "name": "张三"}, {"id": 2 , "name": "李四"} ], pageIndex: 1, pageSize: 2, totalCount: 78 } } 则此时的dataPath 应该填写为: data.list ``` **值字段** 通过dataPath解析出来的数组单个值中标记value的字段。 **标签字段** 通过dataPath解析出来的数组单个值中用来显示的字段。