vue表格数据加载优化

Question

用vue写代码的时候，我这里有个表格里面嵌套了好多下拉框，数据多的时候，页面会变得很卡，想问一下怎么做优化。但是又不能做分页，因为要做新增一行，所以要全部显示出来

Answer 1

引自免费微信小程序：皆我百晓生

在 Vue.js 中优化表格中大量数据加载性能时，尤其是当表格内嵌有复杂组件（如下拉框）时，可以采用以下策略来提升页面性能：

1. 懒加载（虚拟滚动）： 虽然你提到不能使用分页，但可以考虑使用虚拟滚动技术。它只渲染可视区域内的行，当滚动时动态更新内容，这样可以极大地减少 DOM 元素的数量，从而提高性能。

   使用 vue-virtual-scroller 库可以实现这一功能，安装后配置如下：

   <template>
     <virtual-scroller :items="tableData" item-height="50">
       <div v-for="(item, index) in items" :key="index" style="height: 50px;">
         <!-- 表格行内容 -->
         <el-form-item>
           <el-select v-model="item.selectValue">...</el-select>
           <!-- 其他表格列... -->
         </el-form-item>
       </div>
     </virtual-scroller>
   </template>
   
   <script>
   import VirtualScroller from 'vue-virtual-scroller';
   
   export default {
     components: {
       VirtualScroller,
     },
     data() {
       return {
         tableData: [...], // 大量表格数据
       };
     },
   };
   </script>
   

2. 组件优化：

   • 对于下拉框等复杂组件，确保其选项列表（options）不一次性全部渲染，而是使用 v-if 或者计算属性，在需要展示下拉框时再异步加载或过滤显示。
   • 减少不必要的 watchers，对于不需要实时响应的数据属性，可使用 .sync 修饰符或者自定义事件进行更新。

3. 数据处理：

   • 后端预处理：尽量让后端对大数据做分段或过滤处理，只返回前端真正需要的那部分数据。
   • 前端筛选/排序：仅在用户交互触发时才进行数据处理，避免每次页面加载都进行全量计算。

4. 资源压缩与缓存：

   • 如果下拉框中的选项是固定的且数量较大，可以将其存储为本地缓存或者服务端缓存，并通过请求获取已压缩的选项数据。

5. 代码结构优化：

   • 确保 Vue 组件遵循“单一职责原则”，将复杂的逻辑和样式提取到独立的子组件中，减少单个组件的渲染负担。

以上就是针对 Vue.js 中表格数据加载优化的一些方法，请根据实际项目需求选择合适的方式进行优化。