## 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 | 名稱 | 說明 | | --- | --- | | 無 | 自定義顯示 |