fix(VirtualList): 解决item-height参数值固定，导致数据量较少时无法滚动的问题 (DevCloudFE#1145)

* fix(VirtualList): 解决item-height参数值固定，导致数据量较少时无法滚动的问题

Author: xingyan95

packages/devui-vue/devui/date-picker-pro/__tests__/date-picker-pro.spec.tsx

@@ -424,11 +424,11 @@ describe('date-picker-pro test', () => {
  expect(pickerPanel).toBeTruthy();
 
  const yearListItems = pickerPanel?.querySelectorAll(yearListItemClass);
- expect(yearListItems?.length).toBe(13);
+ expect(yearListItems?.length).toBe(11);
  const weekHeader = pickerPanel?.querySelector(weekHeaderClass);
  expect(weekHeader?.getElementsByTagName('td').length).toBe(7);
  const tableMonthItems = pickerPanel?.querySelectorAll(tableMonthClass);
- expect(tableMonthItems?.length).toBe(12);
+ expect(tableMonthItems?.length).toBe(4);
 
  const date = new Date();
  const todayIndex = 7 - ((date.getDate() - date.getDay()) % 7) + date.getDate();

packages/devui-vue/devui/date-picker-pro/__tests__/range-date-picker-pro.spec.tsx

@@ -391,11 +391,11 @@ describe('range-date-picker-pro test', () => {
  expect(pickerPanel).toBeTruthy();
 
  const yearListItems = pickerPanel?.querySelectorAll(yearListItemClass);
- expect(yearListItems?.length).toBe(13);
+ expect(yearListItems?.length).toBe(11);
  const weekHeader = pickerPanel?.querySelector(weekHeaderClass);
  expect(weekHeader?.getElementsByTagName('td').length).toBe(7);
  const tableMonthItems = pickerPanel?.querySelectorAll(tableMonthClass);
- expect(tableMonthItems?.length).toBe(12);
+ expect(tableMonthItems?.length).toBe(4);
 
  const date = new Date();
  const todayIndex = 7 - ((date.getDate() - date.getDay()) % 7) + date.getDate();

packages/devui-vue/devui/virtual-list/src/hooks/use-virtual.tsx

@@ -1,5 +1,5 @@
 import type { ComputedRef } from 'vue';
-import { computed } from 'vue';
+import { computed, toRefs } from 'vue';
 import { VirtualListProps } from '../virtual-list-types';
 
 interface IUseVirtual {
@@ -8,13 +8,12 @@ interface IUseVirtual {
 }
 
 export default function useVirtual(props: VirtualListProps): IUseVirtual {
+ const { height, data, itemHeight, virtual } = toRefs(props);
  const isVirtual = computed(() => {
- const { height, virtual } = props;
- return !!(virtual !== false && height);
+ return Boolean(virtual.value !== false && height.value);
  });
  const inVirtual = computed(() => {
- const { height, data } = props;
- return isVirtual.value && data && 20 * data.length > height;
+ return Boolean(isVirtual.value && data.value.length && itemHeight.value * data.value.length > height.value);
  });
  return { isVirtual, inVirtual };
 }