test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-04 21:19:01 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity
c07217439e
amis2/docs/zh-CN/components/form/tabs-transfer.md

392 lines
10 KiB
Markdown
Raw Normal View History

add doc
2020-08-05 11:24:25 +08:00
---
title: TabsTransfer 组合穿梭器
description:
type: 0
group: null
menuName: TabsTransfer 组合穿梭器
icon:
---
在[穿梭器（Transfer）](./transfer)的基础上扩充了左边的展示形式，支持 Tabs 的形式展示。对应的 options 的顶级数据，顶层 options 的成员支持 selectMode 配置这个 tab 下面的选项怎么展示。title 可以配置 tab 的标题。
文档文字小调整；统一删掉 schema 中的高度设置；修复 tinymce 弹窗可能被遮挡问题 (#1336) * 文档优化 * 文档细节调整，删除示例的 height 设置，使用自动撑开 * sdk 使用完整例子，因为新版没发布 * 修复官网语言不正确问题 * 增加 icon 调整颜色及大小的例子 * 修复文字错误 * 补充 each 的文档 * 修复 zh-CN 大写问题
2021-01-07 23:35:03 +08:00
```schema: scope="body"
add doc
2020-08-05 11:24:25 +08:00
{
"type": "form",
docs: 将 cfc 的 mock 接口放到项目中支持文档离线访问；将大部分图片外联都放入项目中管理 (#2366)
2021-08-09 18:05:01 +08:00
"api": "/api/mock2/form/saveForm",
1.2.x 文档&示例配置调整 (#2064) * 补充容错 * fix: form 中 name 关联顶层数据初始化失效 * 更新 examples * 文档调整 * 删除多余的文档, 调整 schema * schema 调整 * schema 调整 * control 类型容器 control 改成 body * 修复一个选项加载的bug * form 注册直接用 type
2021-06-07 10:09:55 +08:00
"body": [
add doc
2020-08-05 11:24:25 +08:00
{
"label": "组合穿梭器",
"type": "tabs-transfer",
"name": "a",
"sortable": true,
"selectMode": "tree",
"options": [
{
"label": "成员",
"selectMode": "tree",
tabTransfer 搜索框优化 (#3812)
2022-03-28 10:57:15 +08:00
"searchable": true,
add doc
2020-08-05 11:24:25 +08:00
"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"
}
]
}
]
}
]
}
]
}
```
feat: transfer系列组件支持 menuTpl，valueTpl 支持自定义信息展示 (#3264) * 删掉无用代码 * 扩充 menuTpl 功能 * transfer 相关支持 menuTpl * transfer 相关支持 menuTpl * transfer 相关支持 menuTpl * transfer 支持 valueTpl * tabsTransfer 支持 valueTpl * 补充文档 * ts 问题修复 * result 格式兼容
2021-12-27 13:08:37 +08:00
## 自定义选项展示
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"label": "组合穿梭器",
"type": "tabs-transfer",
"name": "a",
"sortable": true,
"selectMode": "tree",
"menuTpl": "<div class='flex justify-between'><span>${label}</span><span class='text-muted m-r text-sm'>${tag}</span></div>",
"valueTpl": "${label}(${value})",
"options": [
{
"label": "成员",
"selectMode": "list",
tabTransfer 搜索框优化 (#3812)
2022-03-28 10:57:15 +08:00
"searchable": true,
feat: transfer系列组件支持 menuTpl，valueTpl 支持自定义信息展示 (#3264) * 删掉无用代码 * 扩充 menuTpl 功能 * transfer 相关支持 menuTpl * transfer 相关支持 menuTpl * transfer 相关支持 menuTpl * transfer 支持 valueTpl * tabsTransfer 支持 valueTpl * 补充文档 * ts 问题修复 * result 格式兼容
2021-12-27 13:08:37 +08:00
"children": [
{
"label": "诸葛亮",
"value": "zhugeliang",
"tag": "法师",
},
{
"label": "曹操",
"value": "caocao",
"tag": "战士",
},
{
"label": "钟无艳",
"value": "zhongwuyan",
"tag": "战士",
},
{
"label": "李白",
"value": "libai",
"tag": "打野"
},
{
"label": "韩信",
"value": "hanxin",
"tag": "打野"
},
{
"label": "云中君",
"value": "yunzhongjun",
"tag": "打野"
}
]
},
{
"label": "用户",
"selectMode": "list",
"children": [
{
"label": "诸葛亮",
"value": "zhugeliang",
"tag": "法师",
},
{
"label": "曹操",
"value": "caocao",
"tag": "战士",
},
{
"label": "钟无艳",
"value": "zhongwuyan",
"tag": "战士",
},
{
"label": "李白",
"value": "libai",
"tag": "打野"
},
{
"label": "韩信",
"value": "hanxin",
"tag": "打野"
},
{
"label": "云中君",
"value": "yunzhongjun",
"tag": "打野"
}
]
}
]
}
]
}
```
fix: Tabs-transfer treeMode defer fail (#3576)
2022-02-14 19:16:21 +08:00
## 数据懒加载
```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",
tabTransfer 搜索框优化 (#3812)
2022-03-28 10:57:15 +08:00
"searchable": true,
fix: Tabs-transfer treeMode defer fail (#3576)
2022-02-14 19:16:21 +08:00
"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"
}
]
}
]
}
]
}
]
}
```
add doc
2020-08-05 11:24:25 +08:00
## 属性表
更多配置请参考[穿梭器（Transfer）](./transfer)。
feat:穿梭框组件事件&动作扩充
2022-03-30 21:34:39 +08:00
fix:tansfer-docs
2022-04-01 09:58:54 +08:00
## 事件表
chore:事件动作文档补充demo
2023-05-28 22:26:48 +08:00
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
docs:校正事件表说明
2022-05-31 15:05:54 +08:00
feat：优化动作数据域 (#5544) * feat:优化事件数据域 * feat:优化事件数据域 * feat:优化事件数据域(option->item,options->items) * feat:优化事件数据域(version) * feat:优化事件数据域(修复弹窗事件多次触发&并行数据获取问题) * feat:优化事件数据域(删除多余代码) * feat:优化事件数据域(更新文档) * feat:优化事件数据域(更新文档) * feat:优化动作数据域 * feat:优化动作数据域
2022-10-12 15:09:03 +08:00
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
| 事件名称 | 事件参数 | 说明 |
| ---------- | -------------------------------------------------------- | ---------------- |
| change | `[name]: string` 组件的值<br/>`items: Option[]` 选项集合 | 选中值变化时触发 |
| tab-change | `key: number` 当前激活的选项卡索引 | 选项卡切换时触发 |
feat:穿梭框组件事件&动作扩充
2022-03-30 21:34:39 +08:00
## 动作表
docs:校正事件表说明
2022-05-31 15:05:54 +08:00
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
feat：优化动作数据域 (#5544) * feat:优化事件数据域 * feat:优化事件数据域 * feat:优化事件数据域(option->item,options->items) * feat:优化事件数据域(version) * feat:优化事件数据域(修复弹窗事件多次触发&并行数据获取问题) * feat:优化事件数据域(删除多余代码) * feat:优化事件数据域(更新文档) * feat:优化事件数据域(更新文档) * feat:优化动作数据域 * feat:优化动作数据域
2022-10-12 15:09:03 +08:00
| 动作名称 | 动作配置 | 说明 |
| ------------ | -------------------------------------- | --------------------------------------------------------------------------------------- |
| clear | - | 清空 |
| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |
| selectAll | - | 全选 |
| changeTabKey | `activeKey: number` 选中的 Tab | 修改当前选中 tab，来选择其他选项 |
| setValue | `value: string` \| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 |
Reference in New Issue Copy Permalink