doc(transfer): docs & selectedKeys (#4717)

* refactor(transfer): docs & selectedKeys

* docs: update snapshot

components/transfer/__tests__/__snapshots__/demo.test.js.snap

@@ -74,8 +74,8 @@ exports[`renders ./components/transfer/demo/advanced.vue correctly 1`] = `
       </ul>
       <!---->
     </div>
-    <div class="ant-transfer-list-footer"><button style="float: right; margin: 5px;" class="ant-btn ant-btn-sm" type="button">
-        <!----><span>reload</span>
+    <div class="ant-transfer-list-footer"><button style="float: left; margin: 5px;" class="ant-btn ant-btn-sm" type="button">
+        <!----><span>left reload</span>
       </button></div>
   </div>
   <div class="ant-transfer-operation"><button disabled="" class="ant-btn ant-btn-primary ant-btn-sm" type="button"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span><span>to right</span></button><button disabled="" class="ant-btn ant-btn-primary ant-btn-sm" type="button"><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span><span>to left</span></button></div>
@@ -90,7 +90,7 @@ exports[`renders ./components/transfer/demo/advanced.vue correctly 1`] = `
       <div class="ant-transfer-list-body-not-found"><span>没数据</span></div>
     </div>
     <div class="ant-transfer-list-footer"><button style="float: right; margin: 5px;" class="ant-btn ant-btn-sm" type="button">
-        <!----><span>reload</span>
+        <!----><span>right reload</span>
       </button></div>
   </div>
 </div>
@@ -300,6 +300,223 @@ exports[`renders ./components/transfer/demo/custom-item.vue correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/transfer/demo/oneway.vue correctly 1`] = `
+<div>
+  <div class="ant-transfer">
+    <div class="ant-transfer-list">
+      <div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-indeterminate"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+          <!---->
+        </label>
+        <!----><span tabindex="-1" role="img" aria-label="down" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span><span class="ant-transfer-list-header-selected"><span>2/20 items</span><span class="ant-transfer-list-header-title">Source</span></span>
+      </div>
+      <div class="ant-transfer-list-body">
+        <!---->
+        <ul class="ant-transfer-list-content">
+          <li class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled" title="content1"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content1</span></li>
+          <li class="ant-transfer-list-content-item" title="content2"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content2</span></li>
+          <li class="ant-transfer-list-content-item" title="content3"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content3</span></li>
+          <li class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled" title="content4"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content4</span></li>
+          <li class="ant-transfer-list-content-item" title="content5"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content5</span></li>
+          <li class="ant-transfer-list-content-item" title="content6"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content6</span></li>
+          <li class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled" title="content7"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content7</span></li>
+          <li class="ant-transfer-list-content-item" title="content8"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content8</span></li>
+          <li class="ant-transfer-list-content-item" title="content9"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content9</span></li>
+          <li class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled" title="content10"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content10</span></li>
+          <li class="ant-transfer-list-content-item" title="content11"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content11</span></li>
+          <li class="ant-transfer-list-content-item" title="content12"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content12</span></li>
+          <li class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled" title="content13"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content13</span></li>
+          <li class="ant-transfer-list-content-item" title="content14"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content14</span></li>
+          <li class="ant-transfer-list-content-item" title="content15"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content15</span></li>
+          <li class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled" title="content16"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content16</span></li>
+          <li class="ant-transfer-list-content-item" title="content17"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content17</span></li>
+          <li class="ant-transfer-list-content-item" title="content18"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content18</span></li>
+          <li class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled" title="content19"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content19</span></li>
+          <li class="ant-transfer-list-content-item" title="content20"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content20</span></li>
+        </ul>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <div class="ant-transfer-operation"><button class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only" type="button"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></button>
+      <!---->
+    </div>
+    <div class="ant-transfer-list">
+      <div class="ant-transfer-list-header">
+        <!---->
+        <!----><span tabindex="-1" role="img" aria-label="down" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title">Target</span></span>
+      </div>
+      <div class="ant-transfer-list-body">
+        <!---->
+        <div class="ant-transfer-list-body-not-found">
+          <div class="ant-empty ant-empty-small ant-empty-normal">
+            <div class="ant-empty-image"><svg class="ant-empty-img-simple" width="64" height="41" viewBox="0 0 64 41">
+                <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
+                  <ellipse class="ant-empty-img-simple-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
+                  <g class="ant-empty-img-simple-g" fill-rule="nonzero" stroke="#D9D9D9">
+                    <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
+                    <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-simple-path"></path>
+                  </g>
+                </g>
+              </svg></div>
+            <p class="ant-empty-description">No Data</p>
+            <!---->
+          </div>
+        </div>
+      </div>
+      <!---->
+    </div>
+  </div><button style="margin-top: 16px;" type="button" role="switch" aria-checked="false" class="ant-switch">
+    <!----><span class="ant-switch-inner">enabled</span>
+  </button>
+</div>
+`;
+
+exports[`renders ./components/transfer/demo/pagination.vue correctly 1`] = `
+<div>
+  <div class="ant-transfer">
+    <div class="ant-transfer-list ant-transfer-list-with-pagination">
+      <div class="ant-transfer-list-header">
+        <!---->
+        <!----><span tabindex="-1" role="img" aria-label="down" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span><span class="ant-transfer-list-header-selected"><span>134 items</span><span class="ant-transfer-list-header-title"></span></span>
+      </div>
+      <div class="ant-transfer-list-body">
+        <!---->
+        <ul class="ant-transfer-list-content">
+          <li class="ant-transfer-list-content-item" title="content1"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content1</span></li>
+          <li class="ant-transfer-list-content-item" title="content2"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content2</span></li>
+          <li class="ant-transfer-list-content-item" title="content4"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content4</span></li>
+          <li class="ant-transfer-list-content-item" title="content5"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content5</span></li>
+          <li class="ant-transfer-list-content-item" title="content7"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content7</span></li>
+          <li class="ant-transfer-list-content-item" title="content8"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content8</span></li>
+          <li class="ant-transfer-list-content-item" title="content10"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content10</span></li>
+          <li class="ant-transfer-list-content-item" title="content11"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content11</span></li>
+          <li class="ant-transfer-list-content-item" title="content13"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content13</span></li>
+          <li class="ant-transfer-list-content-item" title="content14"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content14</span></li>
+        </ul>
+        <ul class="ant-pagination ant-pagination-simple mini ant-transfer-list-pagination">
+          <li title="Previous Page" class="ant-pagination-prev ant-pagination-disabled" aria-disabled="true"><button class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></button></li>
+          <li title="1/14" class="ant-pagination-simple-pager"><input type="text" size="3"><span class="ant-pagination-slash">／</span>14</li>
+          <li title="Next Page" tabindex="0" class="ant-pagination-next" aria-disabled="false"><button class="ant-pagination-item-link" type="button" tabindex="-1"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></button></li>
+          <!---->
+        </ul>
+      </div>
+      <!---->
+    </div>
+    <div class="ant-transfer-operation"><button disabled="" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only" type="button"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></button><button disabled="" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only" type="button"><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></button></div>
+    <div class="ant-transfer-list ant-transfer-list-with-pagination">
+      <div class="ant-transfer-list-header">
+        <!---->
+        <!----><span tabindex="-1" role="img" aria-label="down" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span><span class="ant-transfer-list-header-selected"><span>66 items</span><span class="ant-transfer-list-header-title"></span></span>
+      </div>
+      <div class="ant-transfer-list-body">
+        <!---->
+        <ul class="ant-transfer-list-content">
+          <li class="ant-transfer-list-content-item" title="content3"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content3</span></li>
+          <li class="ant-transfer-list-content-item" title="content6"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content6</span></li>
+          <li class="ant-transfer-list-content-item" title="content9"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content9</span></li>
+          <li class="ant-transfer-list-content-item" title="content12"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content12</span></li>
+          <li class="ant-transfer-list-content-item" title="content15"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content15</span></li>
+          <li class="ant-transfer-list-content-item" title="content18"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content18</span></li>
+          <li class="ant-transfer-list-content-item" title="content21"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content21</span></li>
+          <li class="ant-transfer-list-content-item" title="content24"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content24</span></li>
+          <li class="ant-transfer-list-content-item" title="content27"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content27</span></li>
+          <li class="ant-transfer-list-content-item" title="content30"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              <!---->
+            </label><span class="ant-transfer-list-content-item-text">content30</span></li>
+        </ul>
+        <ul class="ant-pagination ant-pagination-simple mini ant-transfer-list-pagination">
+          <li title="Previous Page" class="ant-pagination-prev ant-pagination-disabled" aria-disabled="true"><button class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></button></li>
+          <li title="1/7" class="ant-pagination-simple-pager"><input type="text" size="3"><span class="ant-pagination-slash">／</span>7</li>
+          <li title="Next Page" tabindex="0" class="ant-pagination-next" aria-disabled="false"><button class="ant-pagination-item-link" type="button" tabindex="-1"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></button></li>
+          <!---->
+        </ul>
+      </div>
+      <!---->
+    </div>
+  </div><button style="margin-top: 16px;" type="button" role="switch" aria-checked="false" class="ant-switch">
+    <!----><span class="ant-switch-inner">enabled</span>
+  </button>
+</div>
+`;
+
 exports[`renders ./components/transfer/demo/search.vue correctly 1`] = `
 <div class="ant-transfer">
   <div class="ant-transfer-list">
@@ -412,7 +629,7 @@ exports[`renders ./components/transfer/demo/table-transfer.vue correctly 1`] = `
     <div class="ant-transfer-list">
       <div class="ant-transfer-list-header">
         <!---->
-        <!----><span tabindex="-1" role="img" aria-label="down" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span><span class="ant-transfer-list-header-selected"><span>14 items</span><span class="ant-transfer-list-header-title"></span></span>
+        <!----><span tabindex="-1" role="img" aria-label="down" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span><span class="ant-transfer-list-header-selected"><span>7 items</span><span class="ant-transfer-list-header-title"></span></span>
       </div>
       <div class="ant-transfer-list-body">
         <!---->
@@ -547,48 +764,6 @@ exports[`renders ./components/transfer/demo/table-transfer.vue correctly 1`] = `
                             </td>
                           </tr>
                           <!---->
-                          <tr data-row-key="10" class="ant-table-row ant-table-row-level-0">
-                            <td class="ant-table-cell ant-table-selection-column">
-                              <!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
-                                <!---->
-                              </label>
-                            </td>
-                            <td class="ant-table-cell">
-                              <!---->content11
-                            </td>
-                            <td class="ant-table-cell">
-                              <!---->description of content11
-                            </td>
-                          </tr>
-                          <!---->
-                          <tr data-row-key="12" class="ant-table-row ant-table-row-level-0">
-                            <td class="ant-table-cell ant-table-selection-column">
-                              <!----><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
-                                <!---->
-                              </label>
-                            </td>
-                            <td class="ant-table-cell">
-                              <!---->content13
-                            </td>
-                            <td class="ant-table-cell">
-                              <!---->description of content13
-                            </td>
-                          </tr>
-                          <!---->
-                          <tr data-row-key="13" class="ant-table-row ant-table-row-level-0">
-                            <td class="ant-table-cell ant-table-selection-column">
-                              <!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
-                                <!---->
-                              </label>
-                            </td>
-                            <td class="ant-table-cell">
-                              <!---->content14
-                            </td>
-                            <td class="ant-table-cell">
-                              <!---->description of content14
-                            </td>
-                          </tr>
-                          <!---->
                         </tbody>
                         <!---->
                       </table>
@@ -600,8 +775,7 @@ exports[`renders ./components/transfer/demo/table-transfer.vue correctly 1`] = `
                   <!---->
                   <li title="Previous Page" class="ant-pagination-prev ant-pagination-disabled" aria-disabled="true"><button class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></button></li>
                   <li title="1" tabindex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"><a rel="nofollow">1</a></li>
-                  <li title="2" tabindex="0" class="ant-pagination-item ant-pagination-item-2"><a rel="nofollow">2</a></li>
-                  <li title="Next Page" tabindex="0" class="ant-pagination-next" aria-disabled="false"><button class="ant-pagination-item-link" type="button" tabindex="-1"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></button></li>
+                  <li title="Next Page" class="ant-pagination-next ant-pagination-disabled" aria-disabled="true"><button class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></button></li>
                   <!---->
                 </ul>
               </div>
@@ -615,7 +789,7 @@ exports[`renders ./components/transfer/demo/table-transfer.vue correctly 1`] = `
     <div class="ant-transfer-list">
       <div class="ant-transfer-list-header">
         <!---->
-        <!----><span tabindex="-1" role="img" aria-label="down" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span><span class="ant-transfer-list-header-selected"><span>6 items</span><span class="ant-transfer-list-header-title"></span></span>
+        <!----><span tabindex="-1" role="img" aria-label="down" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span><span class="ant-transfer-list-header-selected"><span>3 items</span><span class="ant-transfer-list-header-title"></span></span>
       </div>
       <div class="ant-transfer-list-body">
         <!---->
@@ -682,39 +856,6 @@ exports[`renders ./components/transfer/demo/table-transfer.vue correctly 1`] = `
                             </td>
                           </tr>
                           <!---->
-                          <tr data-row-key="11" class="ant-table-row ant-table-row-level-0">
-                            <td class="ant-table-cell ant-table-selection-column">
-                              <!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
-                                <!---->
-                              </label>
-                            </td>
-                            <td class="ant-table-cell">
-                              <!---->content12
-                            </td>
-                          </tr>
-                          <!---->
-                          <tr data-row-key="14" class="ant-table-row ant-table-row-level-0">
-                            <td class="ant-table-cell ant-table-selection-column">
-                              <!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
-                                <!---->
-                              </label>
-                            </td>
-                            <td class="ant-table-cell">
-                              <!---->content15
-                            </td>
-                          </tr>
-                          <!---->
-                          <tr data-row-key="17" class="ant-table-row ant-table-row-level-0">
-                            <td class="ant-table-cell ant-table-selection-column">
-                              <!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
-                                <!---->
-                              </label>
-                            </td>
-                            <td class="ant-table-cell">
-                              <!---->content18
-                            </td>
-                          </tr>
-                          <!---->
                         </tbody>
                         <!---->
                       </table>

components/transfer/demo/advanced.vue

@@ -1,6 +1,6 @@
 <docs>
 ---
-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
 
 <template>
   <a-transfer
+    v-model:target-keys="targetKeys"
     :data-source="mockData"
     show-search
     :list-style="{
@@ -25,12 +26,26 @@ You can customize the labels of the transfer buttons, the width and height of th
       height: '300px',
     }"
     :operations="['to right', 'to left']"
-    :target-keys="targetKeys"
     :render="item => `${item.title}-${item.description}`"
     @change="handleChange"
   >
-    <template #footer>
-      <a-button size="small" style="float: right; margin: 5px" @click="getMock">reload</a-button>
+    <template #footer="{ direction }">
+      <a-button
+        v-if="direction === 'left'"
+        size="small"
+        style="float: left; margin: 5px"
+        @click="getMock"
+      >
+        left reload
+      </a-button>
+      <a-button
+        v-else-if="direction === 'right'"
+        size="small"
+        style="float: right; margin: 5px"
+        @click="getMock"
+      >
+        right reload
+      </a-button>
     </template>
     <template #notFoundContent>
       <span>没数据</span>
@@ -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 {

components/transfer/demo/basic.vue

@@ -19,10 +19,10 @@ The most basic usage of `Transfer` involves providing the source data and target
 <template>
   <div>
     <a-transfer
+      v-model:target-keys="targetKeys"
+      v-model:selected-keys="selectedKeys"
       :data-source="mockData"
       :titles="['Source', 'Target']"
-      :target-keys="targetKeys"
-      :selected-keys="selectedKeys"
       :render="item => item.title"
       :disabled="disabled"
       @change="handleChange"
@@ -65,13 +65,11 @@ export default defineComponent({
     const selectedKeys = ref<string[]>(['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);
     };

components/transfer/demo/custom-item.vue

@@ -1,6 +1,6 @@
 <docs>
 ---
-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.
 
 <template>
   <a-transfer
+    v-model:target-keys="targetKeys"
     :data-source="mockData"
     :list-style="{
       width: '300px',
       height: '300px',
     }"
-    :target-keys="targetKeys"
     @change="handleChange"
   >
     <template #render="item">
@@ -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 {

components/transfer/demo/index.vue

@@ -1,20 +1,24 @@
 <template>
   <demo-sort :cols="1">
     <basic />
+    <oneway />
     <search />
     <advanced />
     <custom-item />
+    <pagination />
     <table-transfer />
     <tree-transfer />
   </demo-sort>
 </template>
 <script lang="ts">
 import Basic from './basic.vue';
+import Oneway from './oneway.vue';
 import Search from './search.vue';
 import Advanced from './advanced.vue';
 import CustomItem from './custom-item.vue';
 import TableTransfer from './table-transfer.vue';
 import TreeTransfer from './tree-transfer.vue';
+import Pagination from './pagination.vue';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 import { defineComponent } from 'vue';
@@ -24,9 +28,11 @@ export default defineComponent({
   US,
   components: {
     Basic,
+    Oneway,
     Search,
     Advanced,
     CustomItem,
+    Pagination,
     TableTransfer,
     TreeTransfer,
   },

components/transfer/demo/oneway.vue

@@ -0,0 +1,92 @@
+<docs>
+---
+order: 1
+title:
+  zh-CN: 单向样式
+  en-US: One Way
+---
+
+## zh-CN
+
+通过 `oneWay` 将 Transfer 转为单向样式。
+
+## en-US
+
+Use `oneWay` to makes Transfer to one way style.
+
+</docs>
+
+<template>
+  <div>
+    <a-transfer
+      v-model:target-keys="targetKeys"
+      v-model:selected-keys="selectedKeys"
+      :data-source="mockData"
+      :one-way="true"
+      :titles="['Source', 'Target']"
+      :render="item => item.title"
+      :disabled="disabled"
+      @change="handleChange"
+      @selectChange="handleSelectChange"
+      @scroll="handleScroll"
+    />
+    <a-switch
+      v-model:checked="disabled"
+      un-checked-children="enabled"
+      checked-children="disabled"
+      style="margin-top: 16px"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+interface MockData {
+  key: string;
+  title: string;
+  description: string;
+  disabled: boolean;
+}
+const mockData: MockData[] = [];
+for (let i = 0; i < 20; i++) {
+  mockData.push({
+    key: i.toString(),
+    title: `content${i + 1}`,
+    description: `description of content${i + 1}`,
+    disabled: i % 3 < 1,
+  });
+}
+
+export default defineComponent({
+  data() {
+    const disabled = ref<boolean>(false);
+
+    const targetKeys = ref<string[]>([]);
+
+    const selectedKeys = ref<string[]>(['1', '4']);
+
+    const handleChange = (nextTargetKeys: string[], direction: string, moveKeys: string[]) => {
+      console.log('targetKeys: ', nextTargetKeys);
+      console.log('direction: ', direction);
+      console.log('moveKeys: ', moveKeys);
+    };
+    const handleSelectChange = (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => {
+      console.log('sourceSelectedKeys: ', sourceSelectedKeys);
+      console.log('targetSelectedKeys: ', targetSelectedKeys);
+    };
+    const handleScroll = (direction: string, e: Event) => {
+      console.log('direction:', direction);
+      console.log('target:', e.target);
+    };
+
+    return {
+      mockData,
+      targetKeys,
+      selectedKeys,
+      disabled,
+      handleChange,
+      handleSelectChange,
+      handleScroll,
+    };
+  },
+});
+</script>

components/transfer/demo/pagination.vue

@@ -0,0 +1,74 @@
+<docs>
+---
+order: 5
+title:
+  zh-CN: 分页
+  en-US: Pagination
+---
+
+## zh-CN
+
+大数据下使用分页。
+
+## en-US
+
+large count of items with pagination.
+
+</docs>
+
+<template>
+  <div>
+    <a-transfer
+      v-model:target-keys="targetKeys"
+      :data-source="mockData"
+      :render="item => item.title"
+      :disabled="disabled"
+      pagination
+      @change="handleChange"
+    />
+    <a-switch
+      v-model:checked="disabled"
+      un-checked-children="enabled"
+      checked-children="disabled"
+      style="margin-top: 16px"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+interface MockData {
+  key: string;
+  title: string;
+  description: string;
+}
+const mockData: MockData[] = [];
+for (let i = 0; i < 200; i++) {
+  mockData.push({
+    key: i.toString(),
+    title: `content${i + 1}`,
+    description: `description of content${i + 1}`,
+  });
+}
+
+const oriTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key);
+export default defineComponent({
+  data() {
+    const disabled = ref<boolean>(false);
+
+    const targetKeys = ref<string[]>(oriTargetKeys);
+
+    const handleChange = (nextTargetKeys: string[], direction: string, moveKeys: string[]) => {
+      console.log('targetKeys: ', nextTargetKeys);
+      console.log('direction: ', direction);
+      console.log('moveKeys: ', moveKeys);
+    };
+
+    return {
+      mockData,
+      targetKeys,
+      disabled,
+      handleChange,
+    };
+  },
+});
+</script>

components/transfer/demo/search.vue

@@ -1,6 +1,6 @@
 <docs>
 ---
-order: 1
+order: 2
 title:
   zh-CN: 带搜索框
   en-US: Search
@@ -18,10 +18,10 @@ Transfer with a search box.
 
 <template>
   <a-transfer
+    v-model:target-keys="targetKeys"
     :data-source="mockData"
     show-search
     :filter-option="filterOption"
-    :target-keys="targetKeys"
     :render="item => item.title"
     @change="handleChange"
     @search="handleSearch"
@@ -66,7 +66,6 @@ export default defineComponent({
     };
     const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
       console.log(keys, direction, moveKeys);
-      targetKeys.value = keys;
     };
 
     const handleSearch = (dir: string, value: string) => {

components/transfer/demo/table-transfer.vue

@@ -1,6 +1,6 @@
 <docs>
 ---
-order: 4
+order: 6
 title:
   zh-CN: 表格穿梭框
   en-US: Table Transfer
@@ -19,8 +19,8 @@ Customize render list with Table component.
 <template>
   <div>
     <a-transfer
+      v-model:target-keys="targetKeys"
       :data-source="mockData"
-      :target-keys="targetKeys"
       :disabled="disabled"
       :show-search="showSearch"
       :filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1"
@@ -76,7 +76,6 @@ Customize render list with Table component.
   </div>
 </template>
 <script lang="ts">
-import { difference } from 'lodash-es';
 import { defineComponent, ref } from 'vue';
 interface MockData {
   key: string;
@@ -86,7 +85,7 @@ interface MockData {
 }
 type tableColumn = Record<string, string>;
 const mockData: MockData[] = [];
-for (let i = 0; i < 20; i++) {
+for (let i = 0; i < 10; i++) {
   mockData.push({
     key: i.toString(),
     title: `content${i + 1}`,
@@ -123,7 +122,7 @@ export default defineComponent({
     const rightColumns = ref<tableColumn[]>(rightTableColumns);
 
     const onChange = (nextTargetKeys: string[]) => {
-      targetKeys.value = nextTargetKeys;
+      console.log('nextTargetKeys', nextTargetKeys);
     };
 
     const getRowSelection = ({
@@ -140,10 +139,7 @@ export default defineComponent({
           const treeSelectedKeys = selectedRows
             .filter(item => !item.disabled)
             .map(({ key }) => key);
-          const diffKeys = selected
-            ? difference(treeSelectedKeys, selectedKeys)
-            : difference(selectedKeys, treeSelectedKeys);
-          onItemSelectAll(diffKeys, selected);
+          onItemSelectAll(treeSelectedKeys, selected);
         },
         onSelect({ key }: Record<string, string>, selected: boolean) {
           onItemSelect(key, selected);

components/transfer/demo/tree-transfer.vue

@@ -1,6 +1,6 @@
 <docs>
 ---
-order: 5
+order: 7
 title:
   zh-CN: 树穿梭框
   en-US: Tree Transfer
@@ -19,12 +19,11 @@ Customize render list with Tree component.
 <template>
   <div>
     <a-transfer
+      v-model:target-keys="targetKeys"
       class="tree-transfer"
       :data-source="dataSource"
-      :target-keys="targetKeys"
       :render="item => item.title"
       :show-select-all="false"
-      @change="onChange"
     >
       <template #children="{ direction, selectedKeys, onItemSelect }">
         <a-tree
@@ -103,9 +102,6 @@ export default defineComponent({
       return handleTreeData(tData, targetKeys.value);
     });
 
-    const onChange = (keys: string[]) => {
-      targetKeys.value = keys;
-    };
     const onChecked = (
       _: Record<string, string[]>,
       e: AntTreeNodeCheckedEvent,
@@ -119,7 +115,6 @@ export default defineComponent({
       targetKeys,
       dataSource,
       treeData,
-      onChange,
       onChecked,
     };
   },

components/transfer/index.en-US.md

@@ -12,6 +12,10 @@ Alert component for feedback.
 - When you need to show alert messages to users.
 - When you need a persistent static container which is closable by user actions.
 
+Transfer the elements between two columns in an intuitive and efficient way.
+
+One or more elements can be selected from either column, one click on the proper `direction` button, and the transfer is done. The left column is considered the `source` and the right column is considered the `target`. As you can see in the API description, these names are reflected in.
+
 ## API
 
 | Property | Description | Type | Default | Version |
@@ -22,12 +26,15 @@ Alert component for feedback.
 | footer | customize the progress dot by setting a scoped slot | slot="footer" slot-scope="props" |  |  |
 | listStyle | A custom CSS style used for rendering the transfer columns. | object |  |  |
 | locale | i18n text including filter, empty text, item unit, etc | object | `{ itemUnit: 'item', itemsUnit: 'items', notFoundContent: 'The list is empty', searchPlaceholder: 'Search here' }` |  |
+| oneWay | Display as single direction style | boolean | false | 3.0.0 |
 | operations | A set of operations that are sorted from top to bottom. | string\[] | \['>', '<'] |  |
+| operationStyle | A custom CSS style used for rendering the operations column | CSSProperties | - | 3.0.0 |
+| pagination | Use pagination. Not work in render props | boolean \| { pageSize: number } | false | 3.0.0 |
 | render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a element which is generated from that record. Also, it can return a plain object with `value` and `label`, `label` is a element and `value` is for title | Function(record) \| slot |  |  |
-| selectedKeys | A set of keys of selected items. | string\[] | \[] |  |
+| selectedKeys(v-model) | A set of keys of selected items. | string\[] | \[] |  |
 | showSearch | If included, a search box is shown on each column. | boolean | false |  |
 | showSelectAll | Show select all checkbox on the header | boolean | true |  |
-| targetKeys | A set of keys of elements that are listed on the right column. | string\[] | \[] |  |
+| targetKeys(v-model) | A set of keys of elements that are listed on the right column. | string\[] | \[] |  |
 | titles | A set of titles that are sorted from left to right. | string\[] | - |  |
 
 ### events

components/transfer/index.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
-import { watchEffect, defineComponent, ref, watch } from 'vue';
+import { watchEffect, defineComponent, ref, watch, toRaw } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { getPropsSlot } from '../_util/props-util';
 import classNames from '../_util/classNames';
@@ -90,11 +90,6 @@ export const transferProps = {
   children: { type: Function as PropType<(props: TransferListBodyProps) => VueNode> },
   oneWay: { type: Boolean, default: undefined },
   pagination: { type: [Object, Boolean] as PropType<PaginationType>, default: undefined },
-  onChange: PropTypes.func,
-  onSelectChange: PropTypes.func,
-  onSearch: PropTypes.func,
-  onScroll: PropTypes.func,
-  ['onUpdate:targetKeys']: PropTypes.func,
 };
 
 export type TransferProps = Partial<ExtractPropTypes<typeof transferProps>>;
@@ -113,7 +108,7 @@ const Transfer = defineComponent({
     'rightSelectAllLabel',
     'footer',
   ],
-  emits: ['update:targetKeys', 'change', 'search', 'scroll', 'selectChange'],
+  emits: ['update:targetKeys', 'update:selectedKeys', 'change', 'search', 'scroll', 'selectChange'],
   setup(props, { emit, attrs, slots, expose }) {
     const { configProvider, prefixCls, direction } = useConfigInject('transfer', props);
     const sourceSelectedKeys = ref([]);
@@ -193,14 +188,14 @@ const Transfer = defineComponent({
         if (!props.selectedKeys) {
           sourceSelectedKeys.value = holder;
         }
-
-        emit('selectChange', holder, targetSelectedKeys.value);
+        emit('update:selectedKeys', [...holder, ...targetSelectedKeys.value]);
+        emit('selectChange', holder, toRaw(targetSelectedKeys.value));
       } else {
         if (!props.selectedKeys) {
           targetSelectedKeys.value = holder;
         }
-
-        emit('selectChange', sourceSelectedKeys.value, holder);
+        emit('update:selectedKeys', [...holder, ...sourceSelectedKeys.value]);
+        emit('selectChange', toRaw(sourceSelectedKeys.value), holder);
       }
     };
 

components/transfer/index.zh-CN.md

@@ -13,6 +13,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QAXskNI4G/Transfer.svg
 - 需要在多个可选项中进行多选时。
 - 比起 Select 和 TreeSelect，穿梭框占据更大的空间，可以展示可选项的更多信息。
 
+穿梭选择框用直观的方式在两栏中移动元素，完成选择行为。
+
+选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。其中，左边一栏为 `source`，右边一栏为 `target`，API 的设计也反映了这两个概念。
+
 ## API
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -23,12 +27,15 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QAXskNI4G/Transfer.svg
 | footer | 可以设置为一个 作用域插槽 | slot="footer" slot-scope="props" |  |  |
 | listStyle | 两个穿梭框的自定义样式 | object |  |  |
 | locale | 各种语言 | object | `{ itemUnit: '项', itemsUnit: '项', notFoundContent: '列表为空', searchPlaceholder: '请输入搜索内容' }` |  |
+| oneWay | 展示为单向样式 | boolean | false | 3.0.0 |
 | operations | 操作文案集合，顺序从上至下 | string\[] | \['>', '<'] |  |
+| operationStyle | 操作栏的自定义样式 | CSSProperties | - | 3.0.0 |
+| pagination | 使用分页样式，自定义渲染列表下无效 | boolean \| { pageSize: number } | flase | 3.0.0 |
 | render | 每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 element。或者返回一个普通对象，其中 `label` 字段为 element，`value` 字段为 title | Function(record)\| slot |  |  |
-| selectedKeys | 设置哪些项应该被选中 | string\[] | \[] |  |
+| selectedKeys(v-model) | 设置哪些项应该被选中 | string\[] | \[] |  |
 | showSearch | 是否显示搜索框 | boolean | false |  |
 | showSelectAll | 是否展示全选勾选框 | boolean | true |  |
-| targetKeys | 显示在右侧框数据的 key 集合 | string\[] | \[] |  |
+| targetKeys(v-model) | 显示在右侧框数据的 key 集合 | string\[] | \[] |  |
 | titles | 标题集合，顺序从左至右 | string\[] | \['', ''] |  |
 
 ### 事件