el-table使用fixed错位问题

杜楚
2023-12-01

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;
  }

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

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

**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
  })
},
 类似资料: