为什么要使用el-table-infinite-scroll

列表数据太多,后端又不好分页,一次性加载大量的数据渲染视图会导致页面卡顿,这时候就需要用到el-table-infinite-scroll来“分批”渲染,如:进入页面先渲染视图可见的10条数据,监听element的滚动条时间,滑到底部时渲染接下来的10条数据,以此类推

需要安装三个插件

// Vue2项目中尝试使用的V3.0但是不行,所以安装V2版本的
npm i el-table-infinite-scroll@2 --save

//另外还需要安装@vue/composition-api、 core-js
npm i @vue/composition-api --save
npm i core-js --save

参考版本

引入插件

局部引入

<script>
import elTableInfiniteScroll from 'el-table-infinite-scroll';

export default{
    directives: {
        'el-table-infinite-scroll': elTableInfiniteScroll
    },
}

</script>

在elementui中使用

<el-table :data="visiableData" 
    style="width: 100%" 
    height="100%" 
    tooltip-effect="light"
    v-el-table-infinite-scroll="loadMore" 
>
</el-table>
 loadMore(){
      this.pager.pageNum ++
      // slice切分数据
      this.visiableData = this.data.slice(0, this.pager.pageNum * this.pager.pageSize) 
    },

注意一个坑:v-el-table-infinite-scroll="loadMore",如果写成是 v-el-table-infinite-scroll="loadMore()",会导致无限循环至页面崩溃......

Logo

前往低代码交流专区

更多推荐