持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

前言：

掘友们，大家好。今天在项目中使用element表格的时候遇到了之前遗留的问题，这次就全部的记录一下，并给大家简单的讲解一下遇到的问题和解决办法。

问题一、关于element表格切换分页回滚问题

element表格配合page分页使用时，当我们切换分页，请求后台数据。但是，我们在渲染的过程中，只是利用了vue的双向数据绑定。更换了表格中的数据，并没有直接的操作dom元素，此时，element的表格数据发生变化。但是，当我们滚动表格，滚动到底部呢？分页请求数据后，渲染的数据发生了变化，但是我们的表格却还是滚动在底部展示。

解决方法：

我们可以封装全局方法，通过调用全局方法，使表格在数据更新后，重新回到顶部。声明function函数，挂载在window原型上。el-table__body-wrapper为element表格组件的class类名。获取类名，设置scrollTop为0。

window.resetTableScrollTop = function() {
    let tables = document.getElementsByClassName('el-table__body-wrapper');
    for(let i = 0; i < tables.length; i++) {
        tables[i].scrollTop = 0;
    }
}

问题二、关于element表格错位问题

表格错位问题，是因为设置了fixed定位导致的，还有就是固定了父元素的高度，element表格默认是撑满的，同时你又在el-table-column中设置了宽度width=""，就会导致表格错位。

解决方法1：

使用官方提供的doLayout方法，对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法。通过ref控制table渲染数据时触发。

this.$nextTick(() => {
      if (this.$refs.Table && this.$refs.Table.doLayout) {
        this.$refs.Table.doLayout();
      }
})

解决方法2：

只给部分el-table-column设置宽度，让其他的宽度空余，达到自适应效果。

问题三、关于element分页后index序号延续问题

表格分页后element表格索引序号未发生变换，是因为element序号默认只设置当前表格内部的。

解决方法：

给index属性绑定方法indexMethod

<el-table-column
  type="index"
  :index="indexMethod"
  width="50">
</el-table-column>

方法内部时page当前页*pageSize当前页数量+索引+1就可以了。

indexMethod(index) {
    return (this.alipayReq.page) * (this.alipayReq.pageSize) + index + 1
}

效果

总结：

这是我在使用element表格的时候遇到的问题。总体来说，难度不大。element表格官方文档有很多的api，而且在项目中的应用场景也是非常多的，希望对大家有帮助。