TabsTransfer 组合穿梭器

在穿梭器（Transfer）的基础上扩充了左边的展示形式，支持 Tabs 的形式展示。对应的 options 的顶级数据，顶层 options 的成员支持 selectMode 配置这个 tab 下面的选项怎么展示。title 可以配置 tab 的标题。

```schema: scope=”body” { “type”: “form”, “api”: “/api/mock2/form/saveForm”, “body”: [ { “label”: “组合穿梭器”, “type”: “tabs-transfer”, “name”: “a”, “sortable”: true, “selectMode”: “tree”, “options”: [ { “label”: “成员”, “selectMode”: “tree”, “searchable”: true, “children”: [ { “label”: “法师”, “children”: [ { “label”: “诸葛亮”, “value”: “zhugeliang” } ] }, { “label”: “战士”, “children”: [ { “label”: “曹操”, “value”: “caocao” }, { “label”: “钟无艳”, “value”: “zhongwuyan” } ] }, { “label”: “打野”, “children”: [ { “label”: “李白”, “value”: “libai” }, { “label”: “韩信”, “value”: “hanxin” }, { “label”: “云中君”, “value”: “yunzhongjun” } ] } ] }, { “label”: “用户”, “selectMode”: “chained”, “children”: [ { “label”: “法师”, “children”: [ { “label”: “诸葛亮”, “value”: “zhugeliang2” } ] }, { “label”: “战士”, “children”: [ { “label”: “曹操”, “value”: “caocao2” }, { “label”: “钟无艳”, “value”: “zhongwuyan2” } ] }, { “label”: “打野”, “children”: [ { “label”: “李白”, “value”: “libai2” }, { “label”: “韩信”, “value”: “hanxin2” }, { “label”: “云中君”, “value”: “yunzhongjun2” } ] } ] } ] } ] }

  2. ## 自定义选项展示
  4. ```schema: scope="body"
  5. {
  6.   "type": "form",
  7.   "api": "/api/mock2/form/saveForm",
  8.   "body": [
  9.     {
  10.       "label": "组合穿梭器",
  11.       "type": "tabs-transfer",
  12.       "name": "a",
  13.       "sortable": true,
  14.       "selectMode": "tree",
  15.       "menuTpl": "<div class='flex justify-between'><span>${label}</span><span class='text-muted m-r text-sm'>${tag}</span></div>",
  16.       "valueTpl": "${label}(${value})",
  17.       "options": [
  18.         {
  19.           "label": "成员",
  20.           "selectMode": "list",
  21.           "searchable": true,
  22.           "children": [
  23.             {
  24.               "label": "诸葛亮",
  25.               "value": "zhugeliang",
  26.               "tag": "法师",
  27.             },
  28.             {
  29.               "label": "曹操",
  30.               "value": "caocao",
  31.               "tag": "战士",
  32.             },
  33.             {
  34.               "label": "钟无艳",
  35.               "value": "zhongwuyan",
  36.               "tag": "战士",
  37.             },
  38.             {
  39.               "label": "李白",
  40.               "value": "libai",
  41.               "tag": "打野"
  42.             },
  43.             {
  44.               "label": "韩信",
  45.               "value": "hanxin",
  46.               "tag": "打野"
  47.             },
  48.             {
  49.               "label": "云中君",
  50.               "value": "yunzhongjun",
  51.               "tag": "打野"
  52.             }
  53.           ]
  54.         },
  55.         {
  56.           "label": "用户",
  57.           "selectMode": "list",
  58.           "children": [
  59.             {
  60.               "label": "诸葛亮",
  61.               "value": "zhugeliang",
  62.               "tag": "法师",
  63.             },
  64.             {
  65.               "label": "曹操",
  66.               "value": "caocao",
  67.               "tag": "战士",
  68.             },
  69.             {
  70.               "label": "钟无艳",
  71.               "value": "zhongwuyan",
  72.               "tag": "战士",
  73.             },
  74.             {
  75.               "label": "李白",
  76.               "value": "libai",
  77.               "tag": "打野"
  78.             },
  79.             {
  80.               "label": "韩信",
  81.               "value": "hanxin",
  82.               "tag": "打野"
  83.             },
  84.             {
  85.               "label": "云中君",
  86.               "value": "yunzhongjun",
  87.               "tag": "打野"
  88.             }
  89.           ]
  90.         }
  91.       ]
  92.     }
  93.   ]
  94. }

数据懒加载

schema: scope="body" { "type": "form", "api": "/api/mock2/form/saveForm", "body": [ { "label": "组合穿梭器", "type": "tabs-transfer", "name": "a", "sortable": true, "selectMode": "tree", "options": [ { "label": "成员", "selectMode": "associated", "searchable": true, "leftMode": "tree", "children": [ { ref: "user", "children": [ { "label": "诸葛亮", "value": "zhugeliang2" }, { "label": "上官婉儿", "value": "shangguan" } ] }, { "ref": "a", "children": [ { "label": "A-1", "value": "a1" }, { "label": "A-2", "value": "a2" } ] }, { "ref": "b", "children": [ { "label": "B-1", "value": "b1" } ] }, { "ref": "c", "children": [ { "label": "C-1", "value": "c1" } ] }, { "ref": "d", "children": [ { "label": "D-1", "value": "d1" } ] }, { "ref": "e", "children": [ { "label": "E-1", "value": "e1" }, { "label": "E-2", "value": "e2" } ] } ], "leftOptions": [ { "defer": true, "deferApi": "/api/mock2/form/getOptions", "label": "DEFER" }, { "label": "法师", "value": "user" } ] }, { "label": "用户", "selectMode": "chained", "children": [ { "label": "法师", "children": [ { "label": "诸葛亮", "value": "zhugeliang2" } ] }, { "label": "战士", "children": [ { "label": "曹操", "value": "caocao2" }, { "label": "钟无艳", "value": "zhongwuyan2" } ] }, { "label": "打野", "children": [ { "label": "李白", "value": "libai2" }, { "label": "韩信", "value": "hanxin2" }, { "label": "云中君", "value": "yunzhongjun2" } ] } ] } ] } ] }

属性表

更多配置请参考穿梭器（Transfer）。

事件表

当前组件会对外派发以下事件，可以通过onEvent来监听这些事件，并通过actions来配置执行的动作，在actions中可以通过event.data.xxx事件参数变量来获取事件产生的数据，详细请查看事件动作。

事件名称 事件参数 说明
change event.data.value: string 选中值 选中值变化时触发
tab-change event.data.key: number 当前激活的选项卡索引 选项卡切换时触发

动作表

当前组件对外暴露以下特性动作，其他组件可以通过指定actionType: 动作名称、componentId: 该组件id来触发这些动作，动作配置可以通过args: {动作配置项名称: xxx}来配置具体的参数，详细请查看事件动作。

动作名称 动作配置 说明
clear - 清空
reset - 将值重置为resetValue，若没有配置resetValue，则清空
selectAll - 全选
changeTabKey activeKey: number 选中的 Tab 修改当前选中 tab，来选择其他选项
setValue value: string 更新的值 更新数据，多值用,分隔