# 组件名`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 |