@@ -682,39 +856,6 @@ exports[`renders ./components/transfer/demo/table-transfer.vue correctly 1`] = `
-
- |
-
- |
-
- content12
- |
-
-
-
- |
-
- |
-
- content15
- |
-
-
-
- |
-
- |
-
- content18
- |
-
-
diff --git a/components/transfer/demo/advanced.vue b/components/transfer/demo/advanced.vue
index 4d2993b100..499d561988 100644
--- a/components/transfer/demo/advanced.vue
+++ b/components/transfer/demo/advanced.vue
@@ -1,6 +1,6 @@
---
-order: 2
+order: 3
title:
zh-CN: 高级用法
en-US: Advanced
@@ -18,6 +18,7 @@ You can customize the labels of the transfer buttons, the width and height of th
-
- reload
+
+
+ left reload
+
+
+ right reload
+
没数据
@@ -72,7 +87,6 @@ export default defineComponent({
targetKeys.value = keys;
};
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
- targetKeys.value = keys;
console.log(keys, direction, moveKeys);
};
return {
diff --git a/components/transfer/demo/basic.vue b/components/transfer/demo/basic.vue
index c57c64d925..5ad317a861 100644
--- a/components/transfer/demo/basic.vue
+++ b/components/transfer/demo/basic.vue
@@ -19,10 +19,10 @@ The most basic usage of `Transfer` involves providing the source data and target
(['1', '4']);
const handleChange = (nextTargetKeys: string[], direction: string, moveKeys: string[]) => {
- targetKeys.value = nextTargetKeys;
console.log('targetKeys: ', nextTargetKeys);
console.log('direction: ', direction);
console.log('moveKeys: ', moveKeys);
};
const handleSelectChange = (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => {
- selectedKeys.value = [...sourceSelectedKeys, ...targetSelectedKeys];
console.log('sourceSelectedKeys: ', sourceSelectedKeys);
console.log('targetSelectedKeys: ', targetSelectedKeys);
};
diff --git a/components/transfer/demo/custom-item.vue b/components/transfer/demo/custom-item.vue
index 43020d06c0..c25f6808c0 100644
--- a/components/transfer/demo/custom-item.vue
+++ b/components/transfer/demo/custom-item.vue
@@ -1,6 +1,6 @@
---
-order: 3
+order: 4
title:
zh-CN: 自定义渲染行数据
en-US: Custom datasource
@@ -18,12 +18,12 @@ Custom each Transfer Item, and in this way you can render a complex datasource.
@@ -66,7 +66,6 @@ export default defineComponent({
targetKeys.value = keys;
};
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
- targetKeys.value = keys;
console.log(keys, direction, moveKeys);
};
return {
diff --git a/components/transfer/demo/index.vue b/components/transfer/demo/index.vue
index cc0b02a0f1..6299ce0428 100644
--- a/components/transfer/demo/index.vue
+++ b/components/transfer/demo/index.vue
@@ -1,20 +1,24 @@
+
+
diff --git a/components/transfer/demo/pagination.vue b/components/transfer/demo/pagination.vue
new file mode 100644
index 0000000000..d60cadc98d
--- /dev/null
+++ b/components/transfer/demo/pagination.vue
@@ -0,0 +1,74 @@
+
+---
+order: 5
+title:
+ zh-CN: 分页
+ en-US: Pagination
+---
+
+## zh-CN
+
+大数据下使用分页。
+
+## en-US
+
+large count of items with pagination.
+
+
+
+
+
+
+
diff --git a/components/transfer/demo/search.vue b/components/transfer/demo/search.vue
index 79ec185270..bf0dae87de 100644
--- a/components/transfer/demo/search.vue
+++ b/components/transfer/demo/search.vue
@@ -1,6 +1,6 @@
---
-order: 1
+order: 2
title:
zh-CN: 带搜索框
en-US: Search
@@ -18,10 +18,10 @@ Transfer with a search box.
{
console.log(keys, direction, moveKeys);
- targetKeys.value = keys;
};
const handleSearch = (dir: string, value: string) => {
diff --git a/components/transfer/demo/table-transfer.vue b/components/transfer/demo/table-transfer.vue
index 33ae872d57..047b3f5ff9 100644
--- a/components/transfer/demo/table-transfer.vue
+++ b/components/transfer/demo/table-transfer.vue
@@ -1,6 +1,6 @@
---
-order: 4
+order: 6
title:
zh-CN: 表格穿梭框
en-US: Table Transfer
@@ -19,8 +19,8 @@ Customize render list with Table component.