首页 > 其他分享 >element el-table固定列凹陷问题

element el-table固定列凹陷问题

时间:2023-02-09 17:07:10浏览次数:50  
标签:el 最后 一行 element 滚动条 按钮 table


1、业务背景

列表显示字段过多,最后一栏操作列加固定显示,横向添加滚动条,在自测浏览器开发者模式时,发现固定列的最后一行出现了凹陷现象,网上查阅资料大多为在更新生命周期或者页面更新操作时重载页面,这些方法对本文出现的现象没有实际效果,最后的解决办法为直接设置横向滚动条,将列表的高度撑高以此解决问题。

element el-table固定列凹陷问题_ui

图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>

element el-table固定列凹陷问题_vue.js_02

图2 更新后的按钮进行上述同样操作位置正常

3、参考链接

​​el-table使用fixed后,最后一行显示不全;el-table设置fixed后,最后一行被遮挡​​



若本文有帮助到阅读本文的同学,欢迎点赞、关注、收藏,互相学习交流。

标签:el,最后,一行,element,滚动条,按钮,table
From: https://blog.51cto.com/u_10040183/6047152

相关文章

  • el-input 限制只能输入正整数
    1、前端页面<el-row:gutter="20"><el-col:span="20"><el-form-itemlabel="数量"prop="quantity"><el-inputclass="entity"placeho......
  • element ui el-date-picker 禁止选择指定日期
    1、日期选择器组件代码<el-col:span="20"><el-form-itemlabel="活动起始日期值"prop="startTime"><el-date-pickerv-model="startTime"type="date"place......
  • vue中静态数据怎么分页(以el-table为例子)
    背景:从别处选择一些数据在界面上用列表展示,列表为静态数据,故需要做分页处理。解决方案:Array.prototype.slice()截取数据,slice(begin,end),从begin开始到end结束,不包括end,返......
  • python selenium.remote远程连接时间达10分钟
    问题:在机器A搭建了selenium-grid的环境,hub以4444端口号启动,并在4444下注册了子node,端口4445,浏览器配置chrome使用代码进行远程连接,并创建会话:传入的server_url= http:......
  • Python教程:selenium模块用法教程
    1.介绍selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题selenium本质是通过驱动浏览器,完全模拟浏览器的操作,比如......
  • ElasticsearchStatusException[Unable to parse response body]; nested: ResponseExc
    ElasticsearchStatusException[Unabletoparseresponsebody];nested:ResponseException[method[PUT],host[http://marketing-ora-m-dev.gwm.com.cn],URI[/kings......
  • UBUNTU 22.04关闭selinux
    一、打开文件vim/etc/selinux/config二、更改为如下SELINUX=disabled三、从启动服务器reboot......
  • Selenium Grid入门详解
    一、简介Selenium是Selenium套件的一部分,它专门用于并行运行多个测试用例在不同的浏览器、操作系统和机器上SeleniumGrid主要使用master-slaves或者hub-nodes (理念:......
  • try catch和if else语句的区别
    区别:if可以进行简单的过滤,但是,由于机器或者说环境各异,可能会产生一些无法预知的异常,这是在开发阶段无法预知的,所以就要用try...catch来捕捉,而if是无法做到的。从程序结构上......
  • 100 行 shell 写个 Docker
    作者:vivo互联网运维团队-HouDengfeng本文主要介绍使用shell实现一个简易的Docker。一、目的在初接触Docker的时候,我们必须要了解的几个概念就是Cgroup、Namespace、RootF......