解决el-table大数据表格卡顿问题

使用umyui中的表格组件

umyui官网

当u-table元素中注入data对象数组后，添加use-virtual属性开启虚拟，同时设置row-height行高(它有默认值，请看文档)，同时必须给定height，或者max-height。

使用ux-grid组件

在需要实现表格合并功能时，使用ux-grid组件；
使用ux-grid树表格， 虚拟滚动自动关闭；
合并表格使用的api与element-ui中的el-table的api是差不多的：

    <ux-grid ref="plxTree"
             show-overflow="tooltip"
             :height="height"
             :checkbox-config="{highlight: true}"
             :tree-config="{children: 'contList' }"
             row-id="rowKey"
             :data="data"
             border
             :span-method="arraySpanMethod"
             @selection-change="selectData">
		      <ux-table-column type="checkbox"
		                       :selectable='selectable'
		                       width="55"
		                       tree-node>
		      </ux-table-column>
		                      ......
		      <ux-table-column resizable
		          show-overflow
		          min-width="100"
		          field="name"
		          title="名字"></ux-table-column>
    </ux-grid>

methods:{
    // 合并表格行
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (row.contList) {
        if (columnIndex === 1) {
          return { rowspan: 1, colspan: 13 }
        } else if (columnIndex > 1) {
          return { rowspan: 0, colspan: 0 }
        }
      }
    },
    //判断是否可选   正能选择有子数组的父元素行
    selectable(row, index) {
      if (row.contList) {
        return true
      } else {
        return false
      }
    }
}

记录滚动条位置

实现功能：
当返回页面时滚动条需要回到原来的页面位置，最开始的时候使用el-table中的方法时一直不行，后面使用元素查看，发现ux-grid组件有一个elx-table–body-wrapper类名，再根据类名选择元素，记录滚动条的位置。
当要记录ux-grid表格的滚动条位置时，使用如下方式：

    //记录表格滚动条位置   
    document.getElementsByClassName('elx-table--body-wrapper')[0].scrollTop