# 組件名`cap4-shuttle` ---- ### 引入 ```js import Cap4Shuttle from 'cap4-pc-ui/lib/cap4-shuttle'; import 'cap4-pc-ui/lib/cap4-shuttle/css/cap4-shuttle.css'; ``` ### 基礎用法 <template> <div class="demo-block" > <cap4-shuttle :treeData="treeData" :dataSource="dataSource" @leftItemClick="leftItemClick" @chooseItem="chooseItem" ></cap4-shuttle> </div> </template> <script> export default { data() { return { // 注意root虛擬節點不顯示 treeData: { name: 'root', id: 'root', level: 0, type: 'ul', show: true, branch: true, showChildren: true, children: [{ id: '0', name: '城市', parentId: 'root', type: 'ul', level: 1, show: true, branch: true, showChildren: true, children: [{ id: '1', level: 2, name: '北京', parentId: '0', show: true, branch: false }, { id: '2', level: 2, name: '上海', parentId: '0', show: true, branch: false }, { id: '3', level: 2, name: '廣州', parentId: '0', show: true, branch: false }] }] }, dataSource: [] }; }, methods: { leftItemClick(item) { console.log(item); }, chooseItem(item) { console.log(item); } } }; </script> ::: demo ```html <template> <div class="demo-block" > <cap4-shuttle :treeData="treeData" :dataSource="dataSource" @leftItemClick="leftItemClick" @chooseItem="chooseItem" ></cap4-shuttle> </div> </template> <script> export default { data() { return { // 注意root虛擬節點不顯示 treeData: { name: 'root', id: 'root', level: 0, type: 'ul', show: true, branch: true, showChildren: true, children: [{ id: '0', name: '城市', parentId: 'root', type: 'ul', level: 1, show: true, branch: true, showChildren: true, children: [{ id: '1', level: 2, name: '北京', parentId: '0', show: true, branch: false }, { id: '2', level: 2, name: '上海', parentId: '0', show: true, branch: false }, { id: '3', level: 2, name: '廣州', parentId: '0', show: true, branch: false }] }] }, dataSource: [] }; }, methods: { leftItemClick(item) { console.log(item); }, chooseItem(item) { console.log(item); } } }; </script> ``` ::: ### Attributes | 參數 | 說明 | 類型 | 可選值 | 默認值 | |---------- |------------------------------------ |---------- |------------- |-------- | |treeData | 數據 (必填)) | Object | — | '' | |dataSource | 選中項 (選填)) | Array | — | | |leftLabel | 左文本 (選填)) | String | — | | |rightLabel | 右文本 (選填)) | String | — | | |leftWidth | 左側樹寬度 (選填)) | [String, Number] | — | | |leftLabelWidth | 左側文本寬度 (選填)) | [String, Number] | — | | |rightWidth | 右側樹寬度 (選填)) | [String, Number] | — | | |contentHeight | 高度 (選填)) | [String, Number] | — | | |showSearchLeft | 左側可搜索 (選填)) | Boolean | — | | ### Event | 事件名稱 | 說明 | 回調參數 | |------------- |----------- |--------- | |leftItemClick |單擊| item | |chooseItem |雙擊| item |