element el-table固定列凹陷问题

GoodTime

发布于 2024-03-05 16:09:54

8460

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>