简单解决表格数据过多导致阻塞的问题

只写Vue一版,适用于React等

产品经理不允许表格分页,但是数据太多导致阻塞,如何处理?

问题描述

在处理前端阻塞问题时,我们首先需要明确阻塞的类型,包括计算和渲染两种。

当将图标切换成表格时,产品经理要求不采用分页,但当前数据表格总共有 800 条数据,导致页面可能在加载时卡顿约 3 秒,给用户一种死机的感觉。随着数据量的增加,卡顿感会逐渐加强。

优化方案一:

我们并不必立即渲染全部数据,而是可以先展示前 10 - 20 条数据。最终目标是实现滑动条下滑到一定位置时,瞬间添加下面的数据。

最终效果

实现原理:

在组件中设置需要的数据:

js 复制代码
tepTableDate: [], // 中间数据
params: {
  pageSize: 10,  // 一次多少个
  pageNum: 0  // 第多少页
},
valueTable: [] // 数据的展示值

表格子组件接收到 tableData 数据后,存储数据并给出展示数据:

js 复制代码
this.tepTableDate = [...this.tableData];
// 给出展示数据
this.valueTable = this.handlePageAPI();

处理数据的函数,使用 slice 切割新数据,不影响 tepTableDate

js 复制代码
 handlePageAPI() {
      const { pageSize, pageNum } = this.params;
      const newValueTable = this.tepTableDate.slice(pageNum * pageSize, (pageNum + 1) * pageSize);
      return newValueTable;
 },

接下来,获取滚动容器并监听滚动事件:

我使用的el-table组件,按照自己的来。

js 复制代码
const eltableNode = document.querySelector(".deal-table .el-table .el-table__body-wrapper"); 
eltableNode.addEventListener("scroll", (e) => {
        // 获取滚动容器
        const scrollContainer = e.target;
        if (scrollContainer.scrollTop + scrollContainer.clientHeight >= scrollContainer.scrollHeight - 10) {
          this.params.pageNum++;
          this.valueTable.push(...this.handlePageAPI());
        }
      });

以上方案解决了快速展示,加载数据问题。

如果带有搜索按钮,在tepTableDate上进行一次过滤就行,过滤出新的数据。

伪代码:

ini 复制代码
<el-table :data="valueTable">
    ......
 </el-table>
kotlin 复制代码
export default {
  props: {
    tableData: {
      type: Array,
      default() {
        return [];
      }
    },
  },
  data() {
    return {
      tepTableDate: [],
      params: {
        pageSize: 10,
        pageNum: 0
      },
      valueTable: []
    };
  },
  mounted() {
    this.handleScroll();
  },
  methods: {
    handleScroll() {
      this.tepTableDate = [...this.tableData];
      this.valueTable = this.handlePageAPI();
      const eltableNode = document.querySelector(".deal-table .el-table .el-table__body-wrapper");
      eltableNode.addEventListener("scroll", (e) => {
        // 获取滚动容器
        const scrollContainer = e.target;
        if (scrollContainer.scrollTop + scrollContainer.clientHeight >= scrollContainer.scrollHeight - 10) {
          this.params.pageNum++;
          this.valueTable.push(...this.handlePageAPI());
        }
      });
    },
    handlePageAPI() {
      const { pageSize, pageNum } = this.params;
      const newValueTable = this.tepTableDate.slice(pageNum * pageSize, (pageNum + 1) * pageSize);
      return newValueTable;
    },
      
  }
};

其他优化方案:

增加 Loading 状态:

在加载数据的时候,可以考虑给用户一个 Loading 的提示,让用户知道数据正在加载中,避免用户误以为页面出现了问题。

优化搜索功能:

当有搜索按钮的时候,可以考虑在搜索的时候异步加载数据,确保搜索结果的及时性。

优化滚动事件:

可以在滚动事件中加入一些节流和防抖的机制,以减少不必要的事件触发,提高性能。

考虑分页的默认状态:

如果用户一开始加载的数据较多,可以考虑在页面初始化时就展示部分数据,而不是等用户滚动到底部才加载。 可以先加载一点,之后在非用户操作下去加载以后的全部数据。

相关推荐
某公司摸鱼前端5 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~5 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程5 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
wen's7 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
vvilkim8 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim8 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心8 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络8 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
失落的多巴胺10 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear10 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化