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

只写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 的提示,让用户知道数据正在加载中,避免用户误以为页面出现了问题。

优化搜索功能:

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

优化滚动事件:

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

考虑分页的默认状态:

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

相关推荐
理想不理想v2 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云12 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
aPurpleBerry1 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
ZL不懂前端2 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x2 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落2 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
麦麦大数据3 小时前
基于vue+neo4j 的中药方剂知识图谱可视化系统
vue.js·知识图谱·neo4j