Transfer: 支持懒加载数据，通过lazy属性配置

examples/docs/zh-CN/transfer.md

@@ -208,6 +208,38 @@
 ```
 :::
 
+### 可懒加载
+如果数据量比较大，一次性加载所有数据会有性能问题时，可以使用`lazy`属性懒加载数据
+:::demo 
+```html
+<template>
+  <el-transfer v-model="value" :data="data" :lazy="20"></el-transfer>
+</template>
+
+<script>
+  export default {
+    data() {
+      const generateData = _ => {
+        const data = [];
+        for (let i = 1; i <= 150; i++) {
+          data.push({
+            key: i,
+            label: `备选项 ${ i }`,
+            disabled: i % 4 === 0
+          });
+        }
+        return data;
+      };
+      return {
+        data: generateData(),
+        value: []
+      };
+    }
+  };
+</script>
+```
+:::
+
 ### Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
@@ -224,6 +256,7 @@
 | props | 数据源的字段别名 | object{key, label, disabled} | — | — |
 | left-default-checked | 初始状态下左侧列表的已勾选项的 key 数组 | array | — | [ ] |
 | right-default-checked | 初始状态下右侧列表的已勾选项的 key 数组 | array | — | [ ] |
+| lazy | 每次懒加载的数量, 值为 0 时关闭懒加载 | number | — | 0 |
 
 ### Slot
 | name | 说明 |

packages/transfer/src/main.vue

@@ -121,6 +121,10 @@
       targetOrder: {
         type: String,
         default: 'original'
+      },
+      lazy: {
+        type: Number,
+        default: 0
       }
     },
 

packages/transfer/src/transfer-panel.vue

@@ -26,15 +26,17 @@
       </el-input>
       <el-checkbox-group
         v-model="checked"
+        ref="listWrapper"
         v-show="!hasNoMatch && data.length > 0"
         :class="{ 'is-filterable': filterable }"
-        class="el-transfer-panel__list">
+        class="el-transfer-panel__list"
+        @scroll.native="doScroll">
         <el-checkbox
           class="el-transfer-panel__item"
           :label="item[keyProp]"
           :disabled="item[disabledProp]"
           :key="item[keyProp]"
-          v-for="item in filteredData">
+          v-for="item in renderData">
           <option-content :option="item"></option-content>
         </el-checkbox>
       </el-checkbox-group>
@@ -107,7 +109,8 @@
       format: Object,
       filterMethod: Function,
       defaultChecked: Array,
-      props: Object
+      props: Object,
+      lazy: Number
     },
 
     data() {
@@ -116,11 +119,20 @@
         allChecked: false,
         query: '',
         inputHover: false,
-        checkChangeByUser: true
+        checkChangeByUser: true,
+        renderData: [],
+        lazyPage: 1,
+        lazyLoaded: false
       };
     },
 
     watch: {
+      filteredData: {
+        immediate: true,
+        handler(val) {
+          this.loadRenderData(1);
+        }
+      },
       checked(val, oldVal) {
         this.updateAllChecked();
         if (this.checkChangeByUser) {
@@ -245,6 +257,45 @@
         if (this.inputIcon === 'circle-close') {
           this.query = '';
         }
+      },
+
+      loadRenderData(reset) {
+        const lazy = Math.max(this.lazy, 0);
+        if (lazy) {
+          const loadNext = () => {
+            let to = lazy * this.lazyPage;
+            const from = lazy * (this.lazyPage - 1);
+            const len = this.filteredData.length;
+            if (to >= len) {
+              this.lazyLoaded = true;
+              to = len;
+            }
+            this.renderData.push(...this.filteredData.slice(from, to));
+            this.lazyPage++;
+          };
+          if (reset) {
+            this.lazyPage = 1;
+            this.renderData = [];
+            this.lazyLoaded = false;
+            while (!this.lazyLoaded && this.renderData.length < 20) {
+              loadNext();
+            }
+          } else {
+            loadNext();
+          }
+        } else {
+          this.renderData = this.filteredData;
+        }
+      },
+
+      doScroll(e) {
+        const target = e.target || e.srcElement;
+        if (this.lazy && !this.lazyLoaded) {
+          const isApproachBottom = target.scrollTop + target.offsetHeight + 50 >= target.scrollHeight;
+          if (isApproachBottom) {
+            this.loadRenderData();
+          }
+        }
       }
     }
   };