Vue2 使用el-table-infinite-scroll

为什么要使用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()"，会导致无限循环至页面崩溃......