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

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

优化搜索功能:

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

优化滚动事件:

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

考虑分页的默认状态:

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

相关推荐
new出一个对象4 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥5 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
前端Hardy6 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189116 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
天天进步20158 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
疯狂的沙粒9 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员9 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
疯狂的沙粒9 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪9 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背9 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript