解决elementui table固定列的时候，滚动条被遮挡无法拖动的问题

当我们使用element table，有时我们需要部分的列固定，我们就给列添加了 fxied属性，但是这时候你会发现table的横向滚动条根本拖不动，只能在固定列外面靠点击来让它过来。

查找原因你会发现原来是固定的列把滚动条给挡住了，只有超出固定的部分滚动条才可以拖动。

解决办法：

1.修改el-table__fixed样式

.el-table {.el-table__fixed {height:auto !important; bottom:17px !important;  }}

效果：就是设置bottom值，使得不盖住滚动条。缺点：不适用与含有合计的table,如果含有合计，合计也会上移。

2.修改el-table__body-wrapper样式的层级，随便设个层级就可

 .el-table__body-wrapper{z-index: 2
}

效果：解决滚动条被遮住的问题，同时含有合计也适用
缺点：就是表头和合计那部分有阴影，中间的部分没有阴影，不过不影响效果，问题不大。

3.在1的基础上，不要el-table默认的合计，自己在el-table标签下添加一行div作为合计，然后需要合计的列自己计算，同时滚动的效果也要和内容同步。

4.增加个全局样式
element-ui.scss

/* Chrome 滚动条优化 */
div {&::-webkit-scrollbar {/*滚动条整体样式*/width: 8px; /*高宽分别对应横竖滚动条的尺寸*/height: 8px;}&::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 8px;background-color: hsla(220, 4%, 58%, 0.3);transition: background-color 0.3s;&:hover {background: #bbb;}}&::-webkit-scrollbar-track {/*滚动条里面轨道*/background: #ededed;}
}

main.js

import './styles/index.scss'

解决elementui table固定列的时候，滚动条被遮挡无法拖动的问题相关推荐

elementui table 固定列_element-ui 中的table的列隐藏问题解决
element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的.之前用bootstrap做的表格,想要实现简短列和详细列的切换.因为详细列实在有太多列了,拉动滚动条 ...
elementui table 固定列_elementUI Table组件如何设置合并列
效果图: image.png 代码如下: :data="tableData" style="width:200px" :border="true&qu ...
elementui表格宽度适应内容_解决elementui表格操作列自适应列宽代码示例
本篇文章小编给大家分享一下解决elementui表格操作列自适应列宽代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 写死宽度时是这样的: 开始 ...
elementui表格固定列之后行错位解决
项目场景 elementui表格在使用的固定列之后,当出现滚动条时,滚动到最后一条数据会发现对不齐. 解决方案: /** *offset //对齐的高度 **/ function elementFix ...
bootstrap table固定列导致复选框失效的解决方法
//获取选中多行数据 function getSelectedRow_st() {//解決固定列导致选择复选框选不中的问题//首先判断表格是否为固定列表格,使用bootstrapTable('getO ...
Bootstrap Table固定列及IE11兼容性问题解决
最近项目的前端用的是bootstrap,用Bootstrap Table做的表格显示.有一部分表格比较特殊,需要实现固定前面几列,后面的拖动.给的原型是用的superTable实现的,整合进项目用Bo ...
Element - table固定列页面数据过多滚动时显示问题
背景:使用el-tabe设置右侧固定列 fixed="right",没有设置表格固定高,数据过多时滚动table会出现如下情况: 代码如下: <el-table :data= ...
html表格横向竖向滚动,利用纯css实现table固定列与表头中间横向滚动的思路和实例...
前言最近在做的后台管理系统要处理大量的表格,因为原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工 ...
elementplus中表格组件使用固定列时出现滚动条粘性布局固定表头
效果图如上, 因为项目经理希望竖向滚动条永远在最外面,所以通过粘性布局实现表头固定: 由于列数过多,固定多选框列和操作列时发现出现了滚动条,看官网上的例子也有,通过检查元素发现是固定列的阴影(使用伪元 ...

解决elementui table固定列的时候，滚动条被遮挡无法拖动的问题

解决elementui table固定列的时候，滚动条被遮挡无法拖动的问题相关推荐

最新文章

热门文章