当前位置：首页 > news >正文

Vue3+TypeScript+Element Plus 表格展开行优化方案

news 来源：原创 2025/6/23 13:27:35

在 Vue3 + TypeScript + Element Plus 项目中优化表格展开行的内存使用，主要从 渲染优化、数据管理 和 内存回收 三方面入手。以下是最佳实践和完整解决方案：

1. 懒加载展开内容（核心优化）

只当行展开时才渲染内容，避免初始化时渲染所有隐藏内容。

vue

复制

下载

<template><el-table :data="tableData" @expand-change="handleExpand"><el-table-column type="expand"><template #default="{ row }"><!-- 关键：v-if 控制渲染时机 --><ExpandedContent v-if="row.isExpanded" :row-data="row" /></template></el-table-column><!-- 其他列 --></el-table>
</template><script setup lang="ts">
import { ref } from 'vue';interface TableRow {id: number;name: string;isExpanded?: boolean; // 控制展开状态details?: any;        // 展开数据
}const tableData = ref<TableRow[]>([]);// 展开/折叠时触发
const handleExpand = (row: TableRow) => {row.isExpanded = !row.isExpanded;// 首次展开时加载数据if (row.isExpanded && !row.details) {fetchDetailData(row.id).then(data => {row.details = data;});}
};// 模拟异步加载详情
const fetchDetailData = async (id: number) => {const res = await fetch(`/api/details/${id}`);return res.json();
};
</script>

2. 虚拟滚动优化（大数据量必备）

使用 vue-virtual-scroller 避免渲染所有行。

bash

复制

下载

npm install vue-virtual-scroller

vue

复制

下载

<template><RecycleScroller:items="tableData":item-size="54"key-field="id"><template #default="{ item: row }"><!-- 自定义行渲染 --><div @click="toggleRow(row)">{{ row.name }}<ExpandedContent v-if="row.isExpanded" :data="row.details" /></div></template></RecycleScroller>
</template>

3. 组件销毁与内存回收

确保展开内容关闭时释放资源：

vue

复制

下载

<script setup lang="ts">
import { onBeforeUnmount } from 'vue';// 在展开行组件内部
const props = defineProps<{ rowData: any }>();// 组件卸载时清理
onBeforeUnmount(() => {// 1. 清除定时器clearInterval(timer.value);// 2. 释放大对象引用props.rowData.largeObject = null;// 3. 移除事件监听器window.removeEventListener('resize', resizeHandler);
});
</script>

4. 数据扁平化处理

避免嵌套对象导致的响应式性能问题：

复制

下载

// 优化前（深层次嵌套）
const badData = [{ id: 1,children: { /* 多层嵌套数据 */ } }
];// 优化后（扁平化 + 按需加载）
interface OptimizedRow {id: number;hasDetails: boolean; // 标记是否有详情details?: DetailItem[]; // 展开时注入
}

5. 手动控制响应式（减少追踪）

使用 shallowRef 或 markRaw 避免不必要响应式开销：

复制

下载

import { shallowRef, markRaw } from 'vue';// 大对象数据使用浅响应
const bigData = shallowRef({ /* 超大对象 */ });// 或直接标记为非响应式
row.details = markRaw(rawDetailsData);

6. 分页/分段加载策略

结合分页减少单次渲染量：

vue

复制

下载

<el-paginationv-model:current-page="currentPage":page-size="20":total="1000"@current-change="loadPage"
/>

7. 全局状态管理优化

当使用 Pinia/Vuex 时：

复制

下载

// 避免在 store 中存储展开行数据
// 改为在组件本地管理
const expandedRows = ref<Record<number, boolean>>({});// 按行ID存储展开状态
const toggleRow = (id: number) => {expandedRows.value[id] = !expandedRows.value[id];
}

8. 代码分割与异步组件

延迟加载复杂展开组件：

vue

复制

下载

<script setup>
import { defineAsyncComponent } from 'vue';const ExpandedContent = defineAsyncComponent(() =>import('./ExpandedContent.vue')
);
</script>