vue+element固定表头滚动条导致表头错误

解决方法

1. untl.js

   封装一个公共的方法

   // 重置表格
    resetTableDom(table) {
         return setTimeout(()=> {
             table.doLayout(); // doLayout是element提供的对表格重新布局的方法
         }, 0)
     }
   

2. 每次请求数据的时候调用该方法

   this.api.getQuotaCompensationListData(params).then((data) => {
       this.loading = false;
            if (!data.data.HasError) {
                this.tableData = data.data.Data;
                this.totalCount = data.data.TotalCount;
                this.util.resetTableDom(this.$refs.table); //传值为表格dom
            }
        }).catch(err => {
            console.log(err);
        })
   }
   

3. 将表格dom传给上述方法

   <el-table :data="tableData" height="100%" highlight-current-row ref="table">el-table>
   

表格序号递增

<el-table-column type="index" prop="index" label="序号">
    <template slot-scope="scope">
        {{(pageIndex-1)*pageSize + scope.$index + 1}}
    </template>
</el-table-column>