示例
何时使用
需要在多个可选项中进行多选时。 需要直观的展示数据的对比与处理时, 多用于一些比较重要的长场景, 例如: 审批/签约/人员变动流程等。
基本用法
通过data属性传递结构，value为右侧穿梭框中内容，通过 getComponent 获取组件实例后，调用getData 方法获取数据，数据格式为Object {data:[], dataOfAll:[], dataOfMap:{} }data为全选节点数据， dataOfAll 为右侧树数据
PCPhonePad
<page>
<actions>
<button bindClick="getTransferData" text="获取数据" status="primary"></button>
</actions>
<module title="数组结构">
<transfer x="transfer" data="{{list}}" value="{{[1]}}" />
</module>
</page>
export default XPage({
data:{
list: [{
"id": 1,
"label": "1-测试门店组"
},
{
"id": 2,
"label": "2-测试门店组"
},
{
"id": 3,
"label": "3-测试门店组"
},
{
"id": 4,
"label": "4-测试门店组"
},
{
"id": 5,
"label": "5-测试门店组"
},
{
"id": 11,
"label": "11-测试门店组"
}],
},
getTransferData(){
let data = this.getComponent('x-transfer').getData()
console.info('右侧穿梭框中的内容为：', data);
}
});
穿梭框左侧如果为树状结构，右侧仍为树状结构
PCPhonePad
<page>
<actions>
<button bindClick="getTransferData" text="获取数据" status="primary"></button>
</actions>
<module title="树状结构">
<transfer x="transfer" data="{{list}}" value="{['3#5#6#7']}"></transfer>
</module>
</page>
export default XPage({
data:{
list: [{
"children": [{
"id": "1#6",
"label": "1011-物美古城店(周炯专用)",
"venderId": 1,
children:[
{
"id": "1#1#7",
"label": "10123-门店（蘑菇小炮）",
"venderId": 1
},
{
"id": "1#1#8",
"label": "101-（蘑菇小炮）",
"venderId": 1
},
]
},
{
"id": "1#7",
"label": "1012-物美西门店（蘑菇小炮）",
"venderId": 1
},
{
"id": "1#8",
"label": "1013-西黄村店",
"venderId": 1
},
{
"id": "1#9",
"label": "1014-北京物美os拼团（小本本）",
"venderId": 1
},
{
"id": "1#10",
"label": "1015-社区拼团自动化测试专用（勿动！）",
"venderId": 1
},
{
"id": "1#11",
"label": "1016-多点第一天团团",
"venderId": 1
}],
"id": 1,
"label": "1-测试来客oop门店组"
},
{
"children": [
{
"id": "2#6",
"label": "1011-物美古城店(周炯专用)",
"venderId": 1
},
{
"id": "2#7",
"label": "1012-物美西门店（蘑菇小炮）",
"venderId": 1
},
{
"id": "2#8",
"label": "1013-西黄村店",
"venderId": 1
},
{
"id": "2#9",
"label": "1014-北京物美os拼团（小本本）",
"venderId": 1
},
{
"id": "2#10",
"label": "1015-社区拼团自动化测试专用（勿动！）",
"venderId": 1
},
{
"id": "2#11",
"label": "1016-多点第一天团团",
"venderId": 1
},
{
"id": "2#12",
"label": "1019-科大店（成都测试）",
"venderId": 1
},
{
"id": "2#13",
"label": "1020-小云岗",
"venderId": 1
},
],
"id": 2,
"label": "2-测试来客oop门店组（复制）"
},
{
"children": [
{
"id": "3#6",
"label": "1011-物美古城店(周炯专用)",
"venderId": 1
},
{
"id": "3#7",
"label": "1012-物美西门店（蘑菇小炮）物美西门店（蘑菇小炮）物美西门店（蘑菇小炮）物美西门店（蘑菇小炮）物美西门店（蘑菇小炮）",
"venderId": 1
},
{
"id": "3#8",
"label": "1013-西黄村店",
"venderId": 1
},
{
"id": "3#9",
"label": "1014-北京物美os拼团（小本本）",
"venderId": 1
},
{
"id": "3#10",
"label": "1015-社区拼团自动化测试专用（勿动！）",
"venderId": 1
},
{
"id": "3#11",
"label": "1016-多点第一天团团",
"venderId": 1
},
{
"id": "3#12",
"label": "1019-科大店（成都测试）",
"venderId": 1
}],
"id": 3,
"label": "3-测试来客oop门店组（复制）（复制）"
},
{
"children": [
{
"id": "4#112",
"label": "1171-中关村门店(DmallOS专用)",
"venderId": 1
},
{
"id": "4#308",
"label": "1477-联想桥店（银座）",
"venderId": 1
}
],
"id": 4,
"label": "4-来客促销门店组-A"
},
{
"children": [
{
"id": "5#6",
"label": "1011-物美古城店(周炯专用)",
"venderId": 1,
"children": [
{
"id": "3#5#6",
"label": "1011-物美古城门店（蘑菇小炮）用)",
"children": [
{
"id": "3#5#6#7",
"label": "1011-物美古城门店",
"venderId": 1
},
{
"id": "3#5#6#8",
"label": "1011-物美古城门店2",
"venderId": 1
},
],
"venderId": 1
},
]
},
{
"id": "5#7",
"label": "1012-物美西门店（蘑菇小炮）",
"venderId": 1
},
{
"id": "5#8",
"label": "1013-西黄村店",
"venderId": 1
},
{
"id": "5#9",
"label": "1014-北京物美os拼团（小本本）",
"venderId": 1
},
{
"id": "5#10",
"label": "1015-社区拼团自动化测试专用（勿动！）",
"venderId": 1
},
{
"id": "5#11",
"label": "1016-多点第一天团团",
"venderId": 1
},
{
"id": "5#308",
"label": "1477-联想桥店（银座）",
"venderId": 1
}
],
"id": 5,
"label": "5-来客促销门店组-B"
},
{
"children": [
{
"id": "11#112",
"label": "1171-中关村门店(DmallOS专用)",
"venderId": 1
}
],
"id": 11,
"label": "11-结算成本管理门店组"
}],
},
getTransferData(){
let data = this.getComponent('transfer').getData()
console.info('右侧穿梭框中的内容为：', data);
}
});
valueType属性为 node 时支持穿梭框右侧数据也为树结构（需携带父节点信息）
PCPhonePad
<page>
<actions>
<button bindClick="getTransferData" text="获取数据" status="primary"></button>
</actions>
<module title="树状结构">
<transfer x="transfer" valueType="node" data="{{list}}" value="{{value}}"></transfer>
</module>
</page>
export default XPage({
data:{
list: [
{
children: [
{
id: '1#6',
label: '1011-物美古城店(周炯专用)',
venderId: 1,
children: [
{
id: '1#1#7',
label: '10123-门店（蘑菇小炮）',
venderId: 1,
},
{
id: '1#1#8',
label: '101-（蘑菇小炮）',
venderId: 1,
},
],
},
{
id: '1#7',
label: '1012-物美西门店（蘑菇小炮）',
venderId: 1,
},
{
id: '1#8',
label: '1013-西黄村店',
venderId: 1,
},
{
id: '1#9',
label: '1014-北京物美os拼团（小本本）',
venderId: 1,
},
{
id: '1#10',
label: '1015-社区拼团自动化测试专用（勿动！）',
venderId: 1,
},
{
id: '1#11',
label: '1016-多点第一天团团',
venderId: 1,
},
],
id: 1,
label: '1-测试来客oop门店组',
},
{
children: [
{
id: '2#6',
label: '1011-物美古城店(周炯专用)',
venderId: 1,
},
{
id: '2#7',
label: '1012-物美西门店（蘑菇小炮）',
venderId: 1,
},
{
id: '2#8',
label: '1013-西黄村店',
venderId: 1,
},
{
id: '2#9',
label: '1014-北京物美os拼团（小本本）',
venderId: 1,
},
{
id: '2#10',
label: '1015-社区拼团自动化测试专用（勿动！）',
venderId: 1,
},
{
id: '2#11',
label: '1016-多点第一天团团',
venderId: 1,
},
{
id: '2#12',
label: '1019-科大店（成都测试）',
venderId: 1,
},
{
id: '2#13',
label: '1020-小云岗',
venderId: 1,
},
],
id: 2,
label: '2-测试来客oop门店组（复制）',
},
{
children: [
{
id: '3#6',
label: '1011-物美古城店(周炯专用)',
venderId: 1,
},
{
id: '3#7',
label: '1012-物美西门店（蘑菇小炮）物美西门店（蘑菇小炮）物美西门店（蘑菇小炮）物美西门店（蘑菇小炮）物美西门店（蘑菇小炮）',
venderId: 1,
},
{
id: '3#8',
label: '1013-西黄村店',
venderId: 1,
},
{
id: '3#9',
label: '1014-北京物美os拼团（小本本）',
venderId: 1,
},
{
id: '3#10',
label: '1015-社区拼团自动化测试专用（勿动！）',
venderId: 1,
},
{
id: '3#11',
label: '1016-多点第一天团团',
venderId: 1,
},
{
id: '3#12',
label: '1019-科大店（成都测试）',
venderId: 1,
},
],
id: 3,
label: '3-测试来客oop门店组（复制）（复制）',
},
{
children: [
{
id: '4#112',
label: '1171-中关村门店(DmallOS专用)',
venderId: 1,
},
{
id: '4#308',
label: '1477-联想桥店（银座）',
venderId: 1,
},
],
id: 4,
label: '4-来客促销门店组-A',
},
{
children: [
{
id: '5#6',
label: '1011-物美古城店(周炯专用)',
venderId: 1,
children: [
{
id: '3#5#6',
label: '1011-物美古城门店（蘑菇小炮）用)',
children: [
{
id: '3#5#6#7',
label: '1011-物美古城门店',
venderId: 1,
},
{
id: '3#5#6#8',
label: '1011-物美古城门店2',
venderId: 1,
},
],
venderId: 1,
},
],
},
{
id: '5#7',
label: '1012-物美西门店（蘑菇小炮）',
venderId: 1,
},
{
id: '5#8',
label: '1013-西黄村店',
venderId: 1,
},
{
id: '5#9',
label: '1014-北京物美os拼团（小本本）',
venderId: 1,
},
{
id: '5#10',
label: '1015-社区拼团自动化测试专用（勿动！）',
venderId: 1,
},
{
id: '5#11',
label: '1016-多点第一天团团',
venderId: 1,
},
{
id: '5#308',
label: '1477-联想桥店（银座）',
venderId: 1,
},
],
id: 5,
label: '5-来客促销门店组-B',
},
],
value: [
{
children: [
{
id: '1#6',
label: '1011-物美古城店(周炯专用)',
venderId: 1,
children: [
{
id: '1#1#7',
label: '10123-门店（蘑菇小炮）',
venderId: 1,
},
{
id: '1#1#8',
label: '101-（蘑菇小炮）',
venderId: 1,
},
],
},
],
id: 1,
label: '1-测试来客oop门店组',
},
{
children: [
{
id: '11#112',
label: '1171-中关村门店(DmallOS专用)',
venderId: 1,
},
],
id: 11,
label: '11-结算成本管理门店组',
},
],
},
getTransferData(){
let data = this.getComponent('transfer').getData()
console.info('右侧穿梭框中的内容为：', data);
}
});
带搜索框
filterable 属性控制是否有搜索框，remoteSearchable 控制为本地搜索(false)还是远程搜素(true)。
PCPhonePad
<page>
<actions>
<button bindClick="getTransferData" text="获取数据" status="primary"></button>
</actions>
<module title="本地搜索">
<transfer x="transfer" data="{{list}}" value="{['3#5#6#7']}" filterable></transfer>
</module>
</page>
export default XPage({
data:{
list: [{
"children": [{
"id": "1#6",
"label": "1011-物美古城店(周炯专用)",
"venderId": 1,
children:[
{
"id": "1#1#7",
"label": "10123-门店（蘑菇小炮）",
"venderId": 1
},
{
"id": "1#1#8",
"label": "101-（蘑菇小炮）",
"venderId": 1
},
]
},
{
"id": "1#7",
"label": "1012-物美西门店（蘑菇小炮）",
"venderId": 1
},
{
"id": "1#8",
"label": "1013-西黄村店",
"venderId": 1
},
{
"id": "1#9",
"label": "1014-北京物美os拼团（小本本）",
"venderId": 1
},
{
"id": "1#10",
"label": "1015-社区拼团自动化测试专用（勿动！）",
"venderId": 1
},
{
"id": "1#11",
"label": "1016-多点第一天团团",
"venderId": 1
}],
"id": 1,
"label": "1-测试来客oop门店组"
},
{
"children": [
{
"id": "2#6",
"label": "1011-物美古城店(周炯专用)",
"venderId": 1
},
{
"id": "2#7",
"label": "1012-物美西门店（蘑菇小炮）",
"venderId": 1
},
{
"id": "2#8",
"label": "1013-西黄村店",
"venderId": 1
},
{
"id": "2#9",
"label": "1014-北京物美os拼团（小本本）",
"venderId": 1
},
{
"id": "2#10",
"label": "1015-社区拼团自动化测试专用（勿动！）",
"venderId": 1
},
{
"id": "2#11",
"label": "1016-多点第一天团团",
"venderId": 1
},
{
"id": "2#12",
"label": "1019-科大店（成都测试）",
"venderId": 1
},
{
"id": "2#13",
"label": "1020-小云岗",
"venderId": 1
},
],
"id": 2,
"label": "2-测试来客oop门店组（复制）"
},
{
"children": [
{
"id": "3#6",
"label": "1011-物美古城店(周炯专用)",
"venderId": 1
},
{
"id": "3#7",
"label": "1012-物美西门店（蘑菇小炮）物美西门店（蘑菇小炮）物美西门店（蘑菇小炮）物美西门店（蘑菇小炮）物美西门店（蘑菇小炮）",
"venderId": 1
},
{
"id": "3#8",
"label": "1013-西黄村店",
"venderId": 1
},
{
"id": "3#9",
"label": "1014-北京物美os拼团（小本本）",
"venderId": 1
},
{
"id": "3#10",
"label": "1015-社区拼团自动化测试专用（勿动！）",
"venderId": 1
},
{
"id": "3#11",
"label": "1016-多点第一天团团",
"venderId": 1
},
{
"id": "3#12",
"label": "1019-科大店（成都测试）",
"venderId": 1
}],
"id": 3,
"label": "3-测试来客oop门店组（复制）（复制）"
},
{
"children": [
{
"id": "4#112",
"label": "1171-中关村门店(DmallOS专用)",
"venderId": 1
},
{
"id": "4#308",
"label": "1477-联想桥店（银座）",
"venderId": 1
}
],
"id": 4,
"label": "4-来客促销门店组-A"
},
{
"children": [
{
"id": "5#6",
"label": "1011-物美古城店(周炯专用)",
"venderId": 1,
"children": [
{
"id": "3#5#6",
"label": "1011-物美古城门店（蘑菇小炮）用)",
"children": [
{
"id": "3#5#6#7",
"label": "1011-物美古城门店",
"venderId": 1
},
{
"id": "3#5#6#8",
"label": "1011-物美古城门店2",
"venderId": 1
},
],
"venderId": 1
},
]
},
{
"id": "5#7",
"label": "1012-物美西门店（蘑菇小炮）",
"venderId": 1
},
{
"id": "5#8",
"label": "1013-西黄村店",
"venderId": 1
},
{
"id": "5#9",
"label": "1014-北京物美os拼团（小本本）",
"venderId": 1
},
{
"id": "5#10",
"label": "1015-社区拼团自动化测试专用（勿动！）",
"venderId": 1
},
{
"id": "5#11",
"label": "1016-多点第一天团团",
"venderId": 1
},
{
"id": "5#308",
"label": "1477-联想桥店（银座）",
"venderId": 1
}
],
"id": 5,
"label": "5-来客促销门店组-B"
},
{
"children": [
{
"id": "11#112",
"label": "1171-中关村门店(DmallOS专用)",
"venderId": 1
}
],
"id": 11,
"label": "11-结算成本管理门店组"
}],
},
getTransferData(){
let data = this.getComponent('transfer').getData()
console.info('右侧穿梭框中的内容为：', data);
}
});
远程搜索通过 searchValueChanged 事件拿到输入框的值，重新获取数据赋值，仅左侧输入框支持远程搜索。
PCPhonePad
<page>
<actions>
<button bindClick="getTransferData" text="获取数据" status="primary"></button>
</actions>
<module title="远程搜索">
<transfer
x="transfer"
data="{{list}}"
remoteSearchable
filterable
bindsearchValueChanged="searchValueChanged"
></transfer>
</module>
</page>
export default XPage({
data:{
list1: [{
"children": [{
"id": "1#6",
"label": "1011-物美古城店(周炯专用)",
"venderId": 1,
children:[
{
"id": "1#1#7",
"label": "10123-门店（蘑菇小炮）",
"venderId": 1
},
{
"id": "1#1#8",
"label": "101-（蘑菇小炮）",
"venderId": 1
},
]
},
{
"id": "1#7",
"label": "1012-物美西门店（蘑菇小炮）",
"venderId": 1
},
{
"id": "1#8",
"label": "1013-西黄村店",
"venderId": 1
},
{
"id": "1#9",
"label": "1014-北京物美os拼团（小本本）",
"venderId": 1
},
{
"id": "1#10",
"label": "1015-社区拼团自动化测试专用（勿动！）",
"venderId": 1
},
{
"id": "1#11",
"label": "1016-多点第一天团团",
"venderId": 1
}],
"id": 1,
"label": "1-测试来客oop门店组"
},
{
"children": [
{
"id": "2#6",
"label": "1011-物美古城店(周炯专用)",
"venderId": 1
},
{
"id": "2#7",
"label": "1012-物美西门店（蘑菇小炮）",
"venderId": 1
},
{
"id": "2#8",
"label": "1013-西黄村店",
"venderId": 1
},
{
"id": "2#9",
"label": "1014-北京物美os拼团（小本本）",
"venderId": 1
},
{
"id": "2#10",
"label": "1015-社区拼团自动化测试专用（勿动！）",
"venderId": 1
},
{
"id": "2#11",
"label": "1016-多点第一天团团",
"venderId": 1
},
{
"id": "2#12",
"label": "1019-科大店（成都测试）",
"venderId": 1
},
{
"id": "2#13",
"label": "1020-小云岗",
"venderId": 1
},
],
"id": 2,
"label": "2-测试来客oop门店组（复制）"
},
{
"children": [
{
"id": "3#6",
"label": "1011-物美古城店(周炯专用)",
"venderId": 1
},
{
"id": "3#7",
"label": "1012-物美西门店（蘑菇小炮）物美西门店（蘑菇小炮）物美西门店（蘑菇小炮）物美西门店（蘑菇小炮）物美西门店（蘑菇小炮）",
"venderId": 1
},
{
"id": "3#8",
"label": "1013-西黄村店",
"venderId": 1
},
{
"id": "3#9",
"label": "1014-北京物美os拼团（小本本）",
"venderId": 1
},
{
"id": "3#10",
"label": "1015-社区拼团自动化测试专用（勿动！）",
"venderId": 1
},
{
"id": "3#11",
"label": "1016-多点第一天团团",
"venderId": 1
},
{
"id": "3#12",
"label": "1019-科大店（成都测试）",
"venderId": 1
}],
"id": 3,
"label": "3-测试来客oop门店组（复制）（复制）"
},
{
"children": [
{
"id": "4#112",
"label": "1171-中关村门店(DmallOS专用)",
"venderId": 1
},
{
"id": "4#308",
"label": "1477-联想桥店（银座）",
"venderId": 1
}
],
"id": 4,
"label": "4-来客促销门店组-A"
},
{
"children": [
{
"id": "5#6",
"label": "1011-物美古城店(周炯专用)",
"venderId": 1,
"children": [
{
"id": "3#5#6",
"label": "1011-物美古城门店（蘑菇小炮）用)",
"children": [
{
"id": "3#5#6#7",
"label": "1011-物美古城门店",
"venderId": 1
},
{
"id": "3#5#6#8",
"label": "1011-物美古城门店2",
"venderId": 1
},
],
"venderId": 1
},
]
},
{
"id": "5#7",
"label": "1012-物美西门店（蘑菇小炮）",
"venderId": 1
},
{
"id": "5#8",
"label": "1013-西黄村店",
"venderId": 1
},
{
"id": "5#9",
"label": "1014-北京物美os拼团（小本本）",
"venderId": 1
},
{
"id": "5#10",
"label": "1015-社区拼团自动化测试专用（勿动！）",
"venderId": 1
},
{
"id": "5#11",
"label": "1016-多点第一天团团",
"venderId": 1
},
{
"id": "5#308",
"label": "1477-联想桥店（银座）",
"venderId": 1
}
],
"id": 5,
"label": "5-来客促销门店组-B"
},
{
"children": [
{
"id": "11#112",
"label": "1171-中关村门店(DmallOS专用)",
"venderId": 1
}
],
"id": 11,
"label": "11-结算成本管理门店组"
}],
list: [],
},
show(){
this.searchValueChanged()
},
searchValueChanged(e) {
console.info('searchValueChanged', e);
setTimeout(() => {
this.setData({list: e ? [{
"children": [
{
"id": "5#6",
"label": "1011-物美古城店(周炯专用)",
"venderId": 1,
"children": [
{
"id": "3#5#6",
"label": "1011-物美古城门店（蘑菇小炮）用)",
"children": [
{
"id": "3#5#6#7",
"label": "1011-物美古城门店",
"venderId": 1
},
{
"id": "3#5#6#8",
"label": "1011-物美古城门店2",
"venderId": 1
},
],
"venderId": 1
},
]
},
],
"id": 5,
"label": "5-来客促销门店组-B"
},
{
"children": [
{
"id": "11#112",
"label": "1171-中关村门店(DmallOS专用)",
"venderId": 1
}
],
"id": 11,
"label": "11-结算成本管理门店组"
}]: this.data.list1 })
}, 500);
},
getTransferData(){
let data = this.getComponent('transfer').getData()
console.info('右侧穿梭框中的内容为：', data);
}
});
左右面板设置支持配置
面板title ， 搜索栏placeholder ， 头部插槽
PCPhonePad
<page>
<actions>
<button bindClick="getTransferData" text="获取数据" status="primary"></button>
</actions>
<module title="插槽">
<transfer
x="transfer"
data="{{list}}"
value="{['3#5#6#7']}"
title="{{left:'left',right:'right'}}"
placeholder="{{left:'left',right:'right'}}"
filterable
>
<template v-slot:left-top>
<button text="左侧头部" status="primary" ></button>
</template>
<template v-slot:right-top>
<button text="右侧头部" status="primary" ></button>
</template>
</transfer>
</module>
</page>
export default XPage({
data:{
list: [{
"children": [{
"id": "1#6",
"label": "1011-物美古城店(周炯专用)",
"venderId": 1,
children:[
{
"id": "1#1#7",
"label": "10123-门店（蘑菇小炮）",
"venderId": 1
},
{
"id": "1#1#8",
"label": "101-（蘑菇小炮）",
"venderId": 1
},
]
},
{
"id": "1#7",
"label": "1012-物美西门店（蘑菇小炮）",
"venderId": 1
},
{
"id": "1#8",
"label": "1013-西黄村店",
"venderId": 1
},
{
"id": "1#9",
"label": "1014-北京物美os拼团（小本本）",
"venderId": 1
},
{
"id": "1#10",
"label": "1015-社区拼团自动化测试专用（勿动！）",
"venderId": 1
},
{
"id": "1#11",
"label": "1016-多点第一天团团",
"venderId": 1
}],
"id": 1,
"label": "1-测试来客oop门店组"
},
{
"children": [
{
"id": "2#6",
"label": "1011-物美古城店(周炯专用)",
"venderId": 1
},
{
"id": "2#7",
"label": "1012-物美西门店（蘑菇小炮）",
"venderId": 1
},
{
"id": "2#8",
"label": "1013-西黄村店",
"venderId": 1
},
{
"id": "2#9",
"label": "1014-北京物美os拼团（小本本）",
"venderId": 1
},
{
"id": "2#10",
"label": "1015-社区拼团自动化测试专用（勿动！）",
"venderId": 1
},
{
"id": "2#11",
"label": "1016-多点第一天团团",
"venderId": 1
},
{
"id": "2#12",
"label": "1019-科大店（成都测试）",
"venderId": 1
},
{
"id": "2#13",
"label": "1020-小云岗",
"venderId": 1
},
],
"id": 2,
"label": "2-测试来客oop门店组（复制）"
},
{
"children": [
{
"id": "3#6",
"label": "1011-物美古城店(周炯专用)",
"venderId": 1
},
{
"id": "3#7",
"label": "1012-物美西门店（蘑菇小炮）物美西门店（蘑菇小炮）物美西门店（蘑菇小炮）物美西门店（蘑菇小炮）物美西门店（蘑菇小炮）",
"venderId": 1
},
{
"id": "3#8",
"label": "1013-西黄村店",
"venderId": 1
},
{
"id": "3#9",
"label": "1014-北京物美os拼团（小本本）",
"venderId": 1
},
{
"id": "3#10",
"label": "1015-社区拼团自动化测试专用（勿动！）",
"venderId": 1
},
{
"id": "3#11",
"label": "1016-多点第一天团团",
"venderId": 1
},
{
"id": "3#12",
"label": "1019-科大店（成都测试）",
"venderId": 1
}],
"id": 3,
"label": "3-测试来客oop门店组（复制）（复制）"
},
{
"children": [
{
"id": "4#112",
"label": "1171-中关村门店(DmallOS专用)",
"venderId": 1
},
{
"id": "4#308",
"label": "1477-联想桥店（银座）",
"venderId": 1
}
],
"id": 4,
"label": "4-来客促销门店组-A"
},
{
"children": [
{
"id": "5#6",
"label": "1011-物美古城店(周炯专用)",
"venderId": 1,
"children": [
{
"id": "3#5#6",
"label": "1011-物美古城门店（蘑菇小炮）用)",
"children": [
{
"id": "3#5#6#7",
"label": "1011-物美古城门店",
"venderId": 1
},
{
"id": "3#5#6#8",
"label": "1011-物美古城门店2",
"venderId": 1
},
],
"venderId": 1
},
]
},
{
"id": "5#7",
"label": "1012-物美西门店（蘑菇小炮）",
"venderId": 1
},
{
"id": "5#8",
"label": "1013-西黄村店",
"venderId": 1
},
{
"id": "5#9",
"label": "1014-北京物美os拼团（小本本）",
"venderId": 1
},
{
"id": "5#10",
"label": "1015-社区拼团自动化测试专用（勿动！）",
"venderId": 1
},
{
"id": "5#11",
"label": "1016-多点第一天团团",
"venderId": 1
},
{
"id": "5#308",
"label": "1477-联想桥店（银座）",
"venderId": 1
}
],
"id": 5,
"label": "5-来客促销门店组-B"
},
{
"children": [
{
"id": "11#112",
"label": "1171-中关村门店(DmallOS专用)",
"venderId": 1
}
],
"id": 11,
"label": "11-结算成本管理门店组"
}],
},
getTransferData(){
let data = this.getComponent('transfer').getData()
console.info('右侧穿梭框中的内容为：', data);
}
});
Attributes
| 属性 | 说明 | 类型 | 可选值 | 默认值 | 端 | 版本 |
|---|---|---|---|---|---|---|
| value | 绑定值 | Array | -- | [] | PC | -- |
| data | 全部数据 | Array | -- | [] | PC | -- |
| valueType | 值类型 | String | normal/node | normal | PC | -- |
| filterable | 是否可搜索 | Boolean | -- | false | PC | -- |
| disabled | 是否禁用 | Boolean | -- | false | PC | -- |
| remoteSearchable | 是否远程搜索 | Boolean | -- | false | PC | -- |
| height | 中间部分的高度 | String | -- | 288px | PC | -- |
| nodeKey | 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 | String | -- | id | PC | -- |
| nodeLabel | 展示字段的key | String | -- | label | PC | -- |
| checkStrictly | 父子节点完全不关联 | Boolean | -- | false | PC | -- |
| father2Son | 当checkStrictly为 true 时，支持父节点关联子节点，子节点不关联父节点 | Boolean | -- | false | PC | -- |
| moveAsync | 当穿梭款左右移动时，是否是异步由用户自己操作 | Boolean | -- | false | PC | -- |
| title | 左右面板的标题 | Object | -- | {left:'全部'， right:'全部'} | PC | -- |
| placeholder | 左右面板搜索框提示 | Object | -- | {left:'输入关键字进行搜索', right:'输入关键字进行搜索'} | PC | -- |
| renderContent | 树节点内容渲染函数,返回节点 | -- | Function(h, { node, data, store } | PC | -- | |
| lazy | 是否懒加载子节点，需与 load 方法结合使用 | Boolean | -- | false | PC | -- |
| load | 当lazy为true时，获取子节点的方法 | Function | -- | Function(node, resolve) | PC | -- |
| hasDuplicateId | 子节点是否存在重复nodekey（如果为true，组件会重新处理nodekey的值，使nodekey唯一，不影响返回数据） | Boolean | -- | false | PC | -- |
| sortNodeMethod | 排序方法 | Function(data) | -- | -- | PC | -- |
| autoSearch | 是否开启自动搜索 | Boolean | -- | false | PC | -- |
Methods
| 名称 | 说明 | 入参 | 返回 | 端 | 版本 |
|---|---|---|---|---|---|
| getData | 右侧列表元素 | -- | {data, dataOfMap, dataOfAll} | PC | -- |
Events
| 名称 | 说明 | 回调参数 | 端 | 版本 |
|---|---|---|---|---|
| searchValueChanged | 远程搜索时输入框值发生变化时 | Function(event) | PC | -- |
| changed | 穿梭框中有操作时都会触发，值中有 type 等参数，根据情况自行使用 | Function({type, position, current, check:{left, right}, has:{left,right}}) | PC | -- |