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>