elementUI表格列太多加载卡顿问题

数据多导致卡顿，第一个想到的就是动态加载

列太多，那就是横向滚动加载啦

上代码

<el-table
    max-height="700px"
    class="table"
    :data="tableData"
    ref="table"
    >
   <el-table-column 
       v-for="(item, i) in cols" :key="i" 
       :prop="item.prop" 
       :label="item.label">
   </el-table-column>
</el-table>

data数据，cols这里只展示3条，测试时造多点，重复也没关系，主要是可以出现滚动条

    tableData:[{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      cols: [
        {
          prop: 'date',
          label: '日期'
        },
        {
          prop: 'name',
          label: '姓名'
        },
        {
          prop: 'address',
          label: '地址'
        },
      ]

methods部分，滚动条到最右侧时的方法，往表格添加列，根据实际情况push

    getMoreLog() {
      this.cols.push({
          prop: 'date',
          label: '日期'
        },
        {
          prop: 'name',
          label: '姓名'
        },
        {
          prop: 'address',
          label: '地址'
        })
    },

mounted部分，最后监听滚动条事件

    // 获取需要绑定的table
    this.dom = this.$refs.table.bodyWrapper
    this.dom.addEventListener('scroll', () => {
      // 滚动距离
      let scrollLeft = this.dom.scrollLeft;
      // 变量windowWidth是可视区的宽度
      let windowWidth = this.dom.clientWidth || this.dom.clientWidth
      // 变量scrollWidth是滚动条的总宽度
      let scrollWidth = this.dom.scrollWidth || this.dom.scrollWidth
      if (scrollLeft + windowWidth === scrollWidth) {
        if (this.cols.length <= 300) this.getMoreLog()
      }
    })