el-table使用fixed错位问题_el-table fixed 错位

1. 使用fixed错位
解决方案：

/*解决表格fixed错位问题*/
  .el-table{
    overflow: auto;
  }
  .el-table__header-wrapper,.el-table__body-wrapper,.el-table__footer-wrapper{overflow:visible;}
  .el-table__body-wrapper{
    overflow-x:visible !important;
  }
  /* 这个是为了解决前面样式覆盖之后伪类带出来的竖线 */
  .el-table::after{
    position: relative;
  }
1
2
3
4
5
6
7
8
9
10
11
12

如果修改了滚动条的样式，需加此样式修改表格边距：

/deep/ .el-table__fixed-right {
    right: 7px!important;
  }
1
2
3

**2.**由于加载数据后表头不一致导致的错位
解决办法：
关键语句：this.$refs.analysisTable.doLayout()，对表格进行重排

getAnalysisList() {
  this.loading = true
  this.tableData = []
  analysisApi.getMyAnalysis(this.params).then(res => {
    this.loading = false
    this.tableData = res.data.rows
    this.tableTotal = res.data.total
    if (this.$refs.analysisTable) {
      this.$refs.analysisTable.doLayout()
    }
  }).catch(err => {
    this.loading = false
  })
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14