iview-ui 表格滚动懒加载分页功能

最新推荐文章于 2024-06-06 14:59:16 发布

miki791

最新推荐文章于 2024-06-06 14:59:16 发布

阅读量1.2k

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_55732297/article/details/126262946

版权

针对iview的表格组件在大量数据下渲染慢的问题，采用前端懒加载优化。由于业务需求，不能使用常规分页，而是通过滚动加载实现分页效果。主要涉及的文件有main.js和loadMore.js，其中引入并使用了自定义的loadMore模块。

摘要由CSDN通过智能技术生成

场景

众所周知，iview的table组件，若数据量大的时候，table组件渲染很慢。为了优化初始化table的时间，不得不做一下优化。

因为，业务需求的原因，此数据表是一个主数据表，不可使用分页....

所以只能乖乖的做一下前端的懒加载（也就是分页）

<Table :loading="loading" :columns="finalAddColums" v-loadmore="loadMoreTableData" :data="tableDataList"
        :max-height="now_height" border>
      </Table>

data(){
    return{
        tableDataList: [],
        pageIndex: 1,
        pageSize: 10,
        pageCount: 0,
        tableData: [],
    }
}

methods: {
      loadMoreTableData() {
        let that = this
        that.pageIndex++;
        if (that.pageIndex > Math.ceil(that.pageCount / that.pageSize)) {
          return false;
        }
        that.getTableData(that.pageIndex);
      },
      getTableData(pageIndex) {
        let that = this
        that.pageCount =