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

只写Vue一版，适用于React等

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

问题描述

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

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

优化方案一：

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

最终效果

实现原理：

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

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

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

this.tepTableDate = [...this.tableData];
// 给出展示数据
this.valueTable = this.handlePageAPI();

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

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

接下来，获取滚动容器并监听滚动事件：

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

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上进行一次过滤就行，过滤出新的数据。

伪代码：

<el-table :data="valueTable">
    ......
 </el-table>

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

优化搜索功能：

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

优化滚动事件：

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

考虑分页的默认状态：

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