如何通过虚拟列表封装 el-select 应对海量数据？

前端

2023-11-12 18:53:25

导言

在现代 Web 应用中，动态加载和展示海量数据已成为常态。然而，当数据量达到一定程度时，传统的 DOM 操作方式会对前端性能造成极大挑战，导致页面卡顿、响应迟缓等问题。

针对此难题，虚拟列表技术应运而生。它通过仅渲染可见区域的数据，大大减少了浏览器 DOM 树的复杂度，从而提升了滚动性能和用户体验。

虚拟列表简介

虚拟列表是一种渲染技术，它仅在用户可视范围内呈现数据项。当用户滚动列表时，它会动态加载并渲染新的数据项，同时销毁超出可视范围的数据项。

封装 el-select

el-select 是 element UI 中一个常用的选择器组件。然而，当需要处理海量数据时，它的默认渲染方式会造成明显的性能问题。

为了解决这个问题，我们可以使用虚拟列表技术对 el-select 进行封装。通过以下步骤，我们可以实现一个高效的虚拟列表 el-select：

1. 创建虚拟列表组件

创建一个新的 Vue 组件，用作虚拟列表容器。该组件将负责管理虚拟列表的渲染逻辑。

<template>
  <ul>
    <slot />
  </ul>
</template>

<script>
import { ref, watch } from "vue";

export default {
  name: "VirtualList",
  props: {
    data: {
      type: Array,
      required: true,
    },
    itemHeight: {
      type: Number,
      default: 50,
    },
  },
  setup(props) {
    const scrollTop = ref(0);
    const startIndex = ref(0);
    const endIndex = ref(0);

    const calculateStartIndex = () => {
      startIndex.value = Math.floor(scrollTop.value / props.itemHeight);
    };

    const calculateEndIndex = () => {
      endIndex.value = Math.ceil((scrollTop.value + props.$el.clientHeight) / props.itemHeight);
    };

    watch(scrollTop, () => {
      calculateStartIndex();
      calculateEndIndex();
    });

    return {
      scrollTop,
      startIndex,
      endIndex,
    };
  },
};
</script>

2. 集成 el-select

在虚拟列表组件中，使用 <el-select> 组件渲染选项。

<template>
  <VirtualList :data="options">
    <el-option
      v-for="option in options"
      :key="option.value"
      :label="option.label"
      :value="option.value"
    />
  </VirtualList>
</template>

<script>
import VirtualList from "./VirtualList.vue";
import { ref } from "vue";

export default {
  name: "VirtualSelect",
  components: {
    VirtualList,
  },
  props: {
    options: {
      type: Array,
      required: true,
    },
  },
  setup(props) {
    const modelValue = ref(null);

    return {
      modelValue,
    };
  },
};
</script>

3. 监听滚动事件

在虚拟列表组件中，监听滚动事件以动态调整渲染范围。

<template>
  <ul @scroll="onScroll">
    <slot />
  </ul>
</template>

<script>
import { ref } from "vue";

export default {
  name: "VirtualList",
  props: {
    data: {
      type: Array,
      required: true,
    },
    itemHeight: {
      type: Number,
      default: 50,
    },
  },
  setup(props) {
    const scrollTop = ref(0);
    const startIndex = ref(0);
    const endIndex = ref(0);

    const onScroll = (e) => {
      scrollTop.value = e.target.scrollTop;
    };

    const calculateStartIndex = () => {
      startIndex.value = Math.floor(scrollTop.value / props.itemHeight);
    };

    const calculateEndIndex = () => {
      endIndex.value = Math.ceil((scrollTop.value + props.$el.clientHeight) / props.itemHeight);
    };

    watch(scrollTop, () => {
      calculateStartIndex();
      calculateEndIndex();
    });

    return {
      scrollTop,
      startIndex,
      endIndex,
      onScroll,
    };
  },
};
</script>