element el-table固定列凹陷問題
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后,最后一行被遮擋
若本文有幫助到閱讀本文的同學,歡迎點贊、關注、收藏,互相學習交流。
本文來自博客園,作者:GoodTimeGGB,轉載請注明原文鏈接:http://www.rzrgm.cn/goodtimeggb/p/17046158.html

浙公網安備 33010602011771號