背景

基于element 表格，没有分页处理，发现一旦数据几千几万页面渲染和滑动很卡顿

解决方案思路

1、加分页，但要接口配合

2、懒加载的思路，有直接的插件,如npm install el-table-infinite-scroll@1.0.10 如下，也可以自己些懒加载实现

//main.js
import elTableInfiniteScroll from 'el-table-infinite-scroll'
Vue.use(elTableInfiniteScroll)
//vue
<template>
  <div id="app">
    <el-table
      :data="tableData"
      v-loading="loading"
      v-el-table-infinite-scroll="loadTable"
    >
      <el-table-column
        label="id"
        prop="date"
      ></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dataTall: [],//总共数据
      tableData: [],//表格展示数据
      n: 20,
      loading: false
    }
  },
  computed: {
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.saveDATA = []
      for (let i = 0; i < 1000; i++) {
        this.dataTall.push({
          date: i,
          name: '王小虎' + i
        })
      }
    },
    loadTable () {
      this.loading = true
      if (this.tableData.length < this.dataTall.length) {
        const data = this.tableData.concat(
          this.dataTall.slice(this.tableData.length, this.tableData.length + n)
        )
        this.$set(this, 'tableData', data)
      }
      this.loading = false
    }
  }
}
</script>

3、有大数据的表格插件可以直接用，如pl-table,umy-ui插件

//安装pl-table 
npm i pl-table

//main.js
import plTable from 'pl-table'
import 'pl-table/themes/index.css' // 引入样式（必须引入)，vuecli3.0不需要配置，cli2.0请查看webpack是否配置了url-loader对woff，ttf文件的引用,不配置会报错哦
//pl-table 是基于element开发的，继承element的样式和方法 在这里就没有引用pl-table的样式，默认样式就是element的样式
Vue.use(plTable)

//vue 只贴了关键代码
<template>
    <pl-table 
      :data="tableData" 
      size="mini" 
      max-height="600" 
      style="width:100%" 
      fixedColumnsRoll  // //大量数据一定要加
      use-virtual      //大量数据一定要加
     >
       <pl-table-column prop="name" label="姓名" >
       </pl-table-column>
    </pl-table> 
</template>
<script>
export default 
  data() {
    return {
     tableData:[]
    }
  }

//安装umy-ui
npm install umy-ui

//main.js
import 'umy-ui/lib/theme-chalk/index.css';// 引入样式  
import { UTable, UTableColumn } from 'umy-ui';  
Vue.use(UTable);  
Vue.use(UTableColumn);
//vue
<template>
    <u-table
      :data="tableData"
      size="mini"
      use-virtual  //大量数据一定要加
      :row-height="30" //行高
      :max-height="600" //超过出现滚动
    >
     <u-table-column prop="index" align="center" type="index" label="序号" width="60px"></u-table-column>
      <u-table-column
        prop="City"
        align="center"
        label="市州"
      ></u-table-column>
    </u-table>
</template>
<script>
export default 
  data() {
    return {
     tableData:[]
    }
  }

关于自己懒加载的案列如下

element表格el-table组件实现虚拟滚动，解决数据量大渲染DOM过多而卡顿问题_前端_D浩DzD-DevPress官方社区 (csdn.net)