组件名cap4-shuttle

---

引入

import Cap4Shuttle from 'cap4-pc-ui/lib/cap4-shuttle';
import 'cap4-pc-ui/lib/cap4-shuttle/css/cap4-shuttle.css';

基础用法

/**/

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);
}
}
};
/**/::: demo

<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

创建人：yinyanting

快速跳转

• 组件名cap4-shuttle
  • 引入
  • 基础用法
  • Attributes
  • Event