1、業務背景

列表顯示字段過多，最后一欄操作列加固定顯示，橫向添加滾動條，在自測瀏覽器開發者模式時，發現固定列的最后一行出現了凹陷現象，網上查閱資料大多為在更新生命周期或者頁面更新操作時重載頁面，這些方法對本文出現的現象沒有實際效果，最后的解決辦法為直接設置橫向滾動條，將列表的高度撐高以此解決問題。

圖1 F12打開瀏覽器再關掉最后一行出現按鈕凹陷現象

2、更新代碼

<el-table
    class="record_table"
    ref="recordTable"
    size="small"
    stripe
    row-key="Id"
    style="width: 100%"
    v-loading="loading"
    :data="list">
    <el-table-column
        label = "備注"
        prop = "Remark"
        width = "120"
        header - align="center"
        align="center" 
        :show-overflow-tooltip="true">
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="190" align="center">
        <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="buttonClick(scope.row)"
              >按鈕
            </el-button>
        </template>
    </el-table-column>
</el-table>

<style lang="scss">
.record_table {
  .el-table__body-wrapper {
    overflow-x: scroll !important; // 設置橫軸滾動條
  }
}
</style>

圖2 更新后的按鈕進行上述同樣操作位置正常

3、參考鏈接

el-table使用fixed后，最后一行顯示不全；el-table設置fixed后，最后一行被遮擋

若本文有幫助到閱讀本文的同學，歡迎點贊、關注、收藏，互相學習交流。