feat(cascader): support virtual scroll api

src/cascader/__tests__/index.test.jsx

@@ -82,7 +82,8 @@ describe('Cascader', () => {
           },
         }).findComponent(CascaderPanel);
         const firstItem = wrapper.find('.t-cascader__item');
-        firstItem.trigger('click');
+
+        await firstItem.trigger('click');
         await wrapper.vm.$nextTick();
 
         expect(fn).toBeCalled();

src/cascader/_example-composition/virtual-scroll.vue

@@ -0,0 +1,54 @@
+<template>
+  <t-cascader
+    v-model="value"
+    :options="options"
+    :scroll="{ type: 'virtual', bufferSize: 5, threshold: 10 }"
+    clearable
+    multiple
+    @change="onChange"
+  />
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue';
+
+const options = ref([]);
+const value = ref(['20.1.20']);
+
+const onChange = (val, context) => {
+  console.log(val, context);
+};
+
+function initOptions() {
+  const list = [];
+  for (let i = 1; i < 50; i++) {
+    const children = [];
+    for (let j = 1; j < 50; j++) {
+      const child = [];
+      for (let k = 1; k < 50; k++) {
+        child.push({
+          label: `子选项${i}.${j}.${k}`,
+          value: `${i}.${j}.${k}`,
+        });
+      }
+      children.push({
+        label: `子选项${i}.${j}`,
+        value: `${i}.${j}`,
+        children: child,
+      });
+    }
+
+    list.push({
+      label: `选项${i}`,
+      value: `${i}`,
+      children,
+    });
+  }
+  return list;
+}
+
+onMounted(() => {
+  const data = initOptions();
+  options.value = data;
+});
+</script>

src/cascader/_example/virtual-scroll.vue

@@ -0,0 +1,57 @@
+<template>
+  <t-cascader
+    v-model="value"
+    :options="options"
+    :scroll="{ type: 'virtual', bufferSize: 5, threshold: 10 }"
+    clearable
+    multiple
+    @change="onChange"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      options: [],
+      value: ['20.1.20'],
+    };
+  },
+  mounted() {
+    const data = this.initOptions();
+    this.options = data;
+  },
+  methods: {
+    onChange(val, context) {
+      console.log(this.value, val, context);
+    },
+    initOptions() {
+      const list = [];
+      for (let i = 1; i < 50; i++) {
+        const children = [];
+        for (let j = 1; j < 50; j++) {
+          const child = [];
+          for (let k = 1; k < 50; k++) {
+            child.push({
+              label: `子选项${i}.${j}.${k}`,
+              value: `${i}.${j}.${k}`,
+            });
+          }
+          children.push({
+            label: `子选项${i}.${j}`,
+            value: `${i}.${j}`,
+            children: child,
+          });
+        }
+
+        list.push({
+          label: `选项${i}`,
+          value: `${i}`,
+          children,
+        });
+      }
+      return list;
+    },
+  },
+};
+</script>

src/cascader/cascader-panel.tsx

@@ -29,6 +29,7 @@ export default defineComponent({
         empty={this.empty}
         trigger={this.trigger}
         cascaderContext={this.cascaderContext}
+        scroll={this.scroll}
         scopedSlots={{ empty: this.slots.empty, option: this.slots.option, loadingText: this.slots.loadingText }}
         onClick={this.onClick}
       />

src/cascader/cascader.tsx

@@ -231,6 +231,7 @@ export default defineComponent({
               loading={this.loading}
               loadingText={this.loadingText}
               cascaderContext={cascaderContext}
+              scroll={this.scroll}
               scopedSlots={{ option: slots.option, empty: slots.empty, loadingText: slots.loadingText }}
             />
           ),

src/cascader/components/Item.tsx

@@ -1,4 +1,6 @@
-import { defineComponent, PropType, computed } from '@vue/composition-api';
+import {
+  defineComponent, PropType, computed, onMounted, ref, nextTick,
+} from '@vue/composition-api';
 import { ChevronRightIcon as TdChevronRightIcon } from 'tdesign-icons-vue';
 import { getFullPathLabel } from '../core/helper';
 import { getCascaderItemClass, getCascaderItemIconClass } from '../core/className';
@@ -33,6 +35,11 @@ const props = {
   onChange: Function as PropType<() => void>,
   onClick: Function as PropType<() => void>,
   onMouseenter: Function as PropType<() => void>,
+  handleRowMounted: Function as PropType<(rowData: any) => void>,
+  isVirtual: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export default defineComponent({
@@ -44,12 +51,25 @@ export default defineComponent({
     const classPrefix = usePrefixClass();
     const { STATUS, SIZE } = useCommonClassName();
     const { ChevronRightIcon } = useGlobalIcon({ ChevronRightIcon: TdChevronRightIcon });
+    const itemRef = ref<HTMLLIElement>(null);
 
     const itemClass = computed(() => getCascaderItemClass(classPrefix.value, props.node, SIZE.value, STATUS.value, props.cascaderContext));
 
     const iconClass = computed(() => getCascaderItemIconClass(classPrefix.value, props.node, STATUS.value, props.cascaderContext));
 
+    onMounted(() => {
+      if (props.isVirtual) {
+        nextTick(() => {
+          props?.handleRowMounted({
+            ref: itemRef,
+            data: props.node,
+          });
+        });
+      }
+    });
+
     return {
+      itemRef,
       COMPONENT_NAME,
       ChevronRightIcon,
       iconClass,
@@ -123,6 +143,7 @@ export default defineComponent({
 
     return (
       <li
+        ref="itemRef"
         class={itemClass}
         onClick={(e: Event) => {
           e.stopPropagation();