vue3页面el-table页面数据过多

Question

这个弹框里面有个表格，这个表格的数据可以导入，可以手动添加，数据量太大了，有17列要实时计算，导致页面很卡，这样子要怎么去优化，

Answer 1

以下内容由CHATGPT及笑面虎共同生成、有用望采纳：

---

【您想要解决的问题】：您提问的目的是解决在使用Vue 3开发的应用中，由于弹框内表格数据量过大导致页面卡顿的问题。

【图片内容】：您上传的图片显示了一个包含多个列（如“Add RoW”、“CN Descriptiol”、“EXW”等）和数据行的表格界面。表格中列出了不同的数据项，如产品编号、代理单位、总代理费、成本、代理费百分比、价格等，总共有49列，数据量超过200条。

【问题出现原因】：页面卡顿的原因可能是因为表格一次性渲染了大量数据，导致浏览器需要处理和渲染的数据量过大，尤其是在使用虚拟滚动或分页等技术之前。此外，如果表格中的数据没有进行适当的状态管理或懒加载，也可能导致性能问题。

【问题解决方案】：

1. 虚拟滚动：实现一个虚拟滚动机制，只渲染可视区域内的行，而不是一次性渲染所有数据。
2. 分页：将数据分成多个页面，每次只加载和显示一个页面的数据。
3. 状态管理：使用Vuex或React Context等状态管理工具来优化组件间的数据传递和状态共享。
4. 懒加载：对于导入的数据，可以实现懒加载，即只在需要时才导入数据。
5. 搜索和过滤：提供搜索和过滤功能，减少用户需要查看的数据量。

【提供代码】：由于您提供的图片内容是表格界面的一部分，而不是具体的代码，以下是一个虚拟滚动的示例代码，您可以根据自己的需求进行调整：

<template>
  <div ref="scrollContainer" class="scroll-container">
    <div v-for="item in visibleItems" :key="item.id">
      {{ item.content }}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useResizeObserver } from '@vueuse/core';

const scrollContainer = ref(null);
const visibleItems = ref([]);

const fetchItems = () => {
  // 模拟获取数据的过程
  const items = Array.from({ length: 200 }, (_, index) => ({
    id: index,
    content: `Item ${index + 1}`,
  }));
  return items;
};

const calculateVisibleItems = () => {
  const container = scrollContainer.value;
  const items = fetchItems();
  const containerHeight = container.offsetHeight;
  const itemHeight = 30; // 假设每项的高度是30px

  const start = Math.floor(container.scrollTop / itemHeight);
  const end = start + Math.ceil(containerHeight / itemHeight);

  visibleItems.value = items.slice(start, end);
};

onMounted(() => {
  calculateVisibleItems();
  useResizeObserver(scrollContainer).forEach(calculateVisibleItems);
});

onUnmounted(() => {
  // 清理逻辑
});
</script>

<style scoped>
.scroll-container {
  overflow-y: scroll;
  height: 300px; /* 根据需要调整高度 */
}
</style>

【代码运行方式】：您需要在Vue 3环境中运行这段代码，确保安装了@vueuse/core库。

【代码预期运行结果】：页面将只渲染当前可视区域内的项，而不是一次性渲染所有200项，从而提高性能。

【推荐相关链接】：

• Vue 3 Documentation
• VueUse - Collection of Vue Composition API utilities
• Virtual Scrolling in Vue