perf: virtual list

components/vc-select/OptionList.tsx

@@ -7,7 +7,7 @@ import { isValidElement } from '../_util/props-util';
 import createRef from '../_util/createRef';
 import type { PropType } from 'vue';
 import { computed, defineComponent, nextTick, reactive, watch } from 'vue';
-import List from '../vc-virtual-list/List';
+import List from '../vc-virtual-list';
 import type {
   OptionsType as SelectOptionsType,
   OptionData,
@@ -346,7 +346,8 @@ const OptionList = defineComponent<OptionListProps<SelectOptionsType[number]>, {
           onScroll={onScroll}
           virtual={virtual}
           onMouseenter={onMouseenter}
-          children={({ group, groupOption, data, label, value }, itemIndex) => {
+          v-slots={{
+            default: ({ group, groupOption, data, label, value }, itemIndex) => {
               const { key } = data;
               // Group
               if (group) {
@@ -357,7 +358,15 @@ const OptionList = defineComponent<OptionListProps<SelectOptionsType[number]>, {
                 );
               }
 
-            const { disabled, title, children, style, class: cls, className, ...otherProps } = data;
+              const {
+                disabled,
+                title,
+                children,
+                style,
+                class: cls,
+                className,
+                ...otherProps
+              } = data;
               const passedProps = omit(otherProps, omitFieldNameList);
               // Option
               const selected = values.has(value);
@@ -425,6 +434,7 @@ const OptionList = defineComponent<OptionListProps<SelectOptionsType[number]>, {
                   )}
                 </div>
               );
+            },
           }}
         ></List>
       </>

components/vc-tree/NodeList.tsx

@@ -269,7 +269,8 @@ export default defineComponent({
             itemHeight={itemHeight}
             prefixCls={`${prefixCls}-list`}
             ref={listRef}
-            children={(treeNode: FlattenNode) => {
+            v-slots={{
+              default: (treeNode: FlattenNode) => {
                 const {
                   pos,
                   data: { ...restProps },
@@ -283,7 +284,6 @@ export default defineComponent({
                 delete restProps.children;
 
                 const treeNodeProps = getTreeNodeProps(mergedKey, treeNodeRequiredProps);
-
                 return (
                   <MotionTreeNode
                     {...restProps}
@@ -305,6 +305,7 @@ export default defineComponent({
                     }}
                   />
                 );
+              },
             }}
           ></VirtualList>
         </>

components/vc-virtual-list/List.tsx

@@ -398,7 +398,7 @@ const List = defineComponent({
       virtual,
       component: Component = 'div',
       onScroll,
-      children,
+      children = this.$slots.default,
       style,
       class: className,
       ...restProps