## Cascader 级联选择 从一组相关联的数据集合中进行选择，常用于省市区、公司级层、事务分类等。 相比 Select 组件，可以一次性完成选择，体验更好。  ### 代码示例 基础用法 ```javascript data: [{ value: 'beijing', label: '北京', children: [ { value: 'gugong', label: '故宫' } ] }, { value: 'jiangsu', label: '江苏', children: [{ value: 'nanjing', label: '南京', children: [ { value: 'fuzimiao', label: '夫子庙' } ] }] }] ``` ```html <cvu-cascader :data="data"></cvu-cascader> ``` 自定义字段名 > 设置属性`children-key`定义子节点键名，如：(children => child) > 设置属性`value-key`定义特殊标识键名，如：(value => code) > 设置属性`label-key`定义名称键名，如：(label => title) ```javascript data: [{ code: 'beijing', title: '北京', child: [ { code: 'gugong', title: '故宫' }, { code: 'tiantan', title: '天坛' }, { code: 'wangfujing', title: '王府井' } ] }, { code: 'jiangsu', title: '江苏', child: [{ code: 'nanjing', title: '南京', child: [ { code: 'fuzimiao', title: '夫子庙' } ] }] }] ``` ```html <cvu-cascader :data="data" children-key="child" value-key="code" label-key="title"></cvu-cascader> ``` 默认值 > 指定 value 默认值，组件会在初始化时选定数据。  ```html <cvu-cascader :data="data" v-model="['jiangsu', 'nanjing', 'fuzimiao']"></cvu-cascader> ``` 移入展开 > 设置属性 trigger 为 hover，当鼠标悬停时就会展开子集。 ```html <cvu-cascader :data="data" trigger="hover"></cvu-cascader> ``` 禁用 > 设置属性 disabled 可以禁用组件。 ```html <cvu-cascader :data="data" disabled></cvu-cascader> ``` 选择即改变 > 设置属性 change-on-select 点任何一级都可以选择。 ```html <cvu-cascader :data="data" change-on-select></cvu-cascader> ``` 搜索 > 使用属性 filterable 可直接搜索选项并选择。 ```html <cvu-cascader :data="data" filterable></cvu-cascader> ``` 动态加载 > 使用 load-data 属性可以异步加载子选项，需要给数据增加 loading 来标识当前是否在加载中。 > load-data 的第二个参数为回调，如果执行，则会自动展开当前项的子列表。 ```html <cvu-cascader :data="data" :load-data="loadData"></cvu-cascader> ``` ```javascript ... loadData (item, callback) { item.loading = true; setTimeout(() => { if (item.value === 'beijing') { item.children = [ { value: 'talkingdata', label: 'TalkingData' } ]; } else if (item.value === 'hangzhou') { item.children = [ { value: 'ali', label: '阿里巴巴' } ]; } item.loading = false; callback(); }, 1000); } ... ``` 尺寸 > 通过设置size属性为large和small将输入框设置为大和小尺寸，不设置为默认（中）尺寸。  ```html <cvu-cascader :data="data" size="large"></cvu-cascader> <cvu-cascader :data="data"></cvu-cascader> <cvu-cascader :data="data" size="small"></cvu-cascader> ``` 自定义已选项 > 对于显示的结果，可以通过 render-format 接收一个函数来自定义。  ```html <cvu-cascader :data="data" :render-format="format"></cvu-cascader> ``` ```javascript ... format (labels, selectedData) { const index = labels.length - 1 const data = selectedData[index] || false if (data && data.value) { return labels[index] + ' - ' + data.value } return labels[index] } ... ``` 自定义显示 > 通过设置 slot 可以自定义显示内容，不局限于输入框。  ```html {{ text }} <cvu-cascader :data="data" @on-change="handleChange"> <a href="javascript:void(0)">选择</a> </cvu-cascader> ``` ```javascript ... handleChange (value, selectedData) { this.text = selectedData.map(o => o.label).join(', '); } ... ``` ### props | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | data | 可选项的数据源，格式参照示例说明 | Array | \[\] | | value | 当前已选项的数据，格式参照示例说明 | Array | \[\] | | render-format | 选择后展示的函数，用于自定义显示格式 | Function | label => label.join(' / ') | | disabled | 是否禁用选择器 | Boolean | false | | clearable | 是否支持清除 | Boolean | true | | placeholder | 输入框占位符 | String | 请选择 | | trigger | 次级菜单展开方式，可选值为`click`或`hover` | String | click | | change-on-select | 当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的示例 | Boolean | false | | size | 输入框大小，可选值为`large`和`small`或者不填 | String | \- | | load-data | 动态获取数据，数据源需标识 loading | Function | \- | | filterable | 是否支持搜索 | Boolean | false | | not-found-text | 当搜索列表为空时显示的内容 | String | 无匹配数据 | | transfer | 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 | Boolean | false | | element-id | 给表单元素设置`id` | String | \- | | transfer-class-name | 开启 transfer 时，给浮层添加额外的 class 名称 | String | \- | | events-enabled | 是否开启 Popper 的 eventsEnabled 属性，开启可能会牺牲一定的性能 | Boolean | false | | <div style="color:#409EFF; text-decoration: underline; " title="新增属性">children-key</div> | 子节点键 | String | children | | <div style="color:#409EFF; text-decoration: underline; " title="新增属性">value-key</div> | 特殊标识键 | String | value | | <div style="color:#409EFF; text-decoration: underline; " title="新增属性">label-key</div> | 名称键 | String | label | ### events | 事件名 | 说明 | 返回值 | | --- | --- | --- | | on-change | 选择完成后的回调，返回值 value 即已选值 value，selectedData 为已选项的具体数据 | value, selectedData | | on-visible-change | 展开和关闭弹窗时触发 | 显示状态，Boolean | ### slots | 名称 | 说明 | | --- | --- | | 无 | 自定义显示 |