解决el-table锁定列后锁定列对应位置的横向滚动条无法拖动问题

转载自：http://t.csdn.cn/dgUSi

原文链接：https://blog.csdn.net/qq_37289115/article/details/123260700

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

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

解决办法：

修改el-table__fixed样式

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

效果：就是设置bottom值，使得不盖住滚动条。

缺点：不适用与含有合计的table,如果含有合计，合计也会上移。

针对有合计行的情况，修改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'

解决el-table锁定列后锁定列对应位置的横向滚动条无法拖动问题相关推荐

解决element-ui的el-select组件文字超过宽度时不出现横向滚动条问题
解决element-ui的el-select组件文字超过宽度时不出现横向滚动条问题参考文章: (1)解决element-ui的el-select组件文字超过宽度时不出现横向滚动条问题 (2)http ...
Element 表格固定列横向滚动条无法拖动的问题解决
在Element-UI中,当对表格列进行固定后,底部的横向滚动条就无法拖动了,主要的问题就是固定区域盖住了横向滚动条. 方案一:修改el-table__body-wrapper样式的层级,随便设个层级 ...
oracle在指定列后添加列,ORACLE中文排序及在table中指定位置增加字段
ORACLE中文排序方式 Oracle9i之前,中文是按照二进制编码进行排序的. 在oracle9i中新增了按照拼音.部首.笔画排序功能.设置NLS_SORT值 SCHINESE_RADICAL_M ...
oracle在指定列后添加列,oracle添加列到指定位置
oracle中, 1.如果表已经装载了大量数据应该是用视图来代替最好. alter table TableNM add NewField varchar2(10) rename TableNM to ...
笔记：Element table表格固定列横向滚动条无法拖动的问题解决
一段样式解决战斗
日常开发记录-el-table 固定列下横向滚动条无法拖动的问题解决方案
原因:层级问题,左侧固定列层级高,滚动条层级低,提升一下滚动条层级即可注意要在全局样式中定义类 fixed-scrool-error 样式 .fixed-scroll-error {.el-tabl ...
element table 合计第一行固定列
element table 合计第一行在这位大哥这里学来的, 但同时我这边的情况是: 固定高度, 第一列固定, 参数多, 因此, 这个方法不能够完全满足, 因此加入以下代码: 代码作用: 在每次获 ...
HTML 锁定表格首行首列、拖拽表格列宽
摘自:http://s.yanghao.org/program/viewdetail.php?i=61717 因为与自己的实际情况有些不同,简单的改造了下...如果有版权问题,请留言... 锁定Tab ...
解决elementui table固定列的时候，滚动条被遮挡无法拖动的问题
当我们使用element table,有时我们需要部分的列固定,我们就给列添加了 fxied属性,但是这时候你会发现table的横向滚动条根本拖不动,只能在固定列外面靠点击来让它过来. 查找原因你会 ...

解决el-table锁定列后锁定列对应位置的横向滚动条无法拖动问题

解决el-table锁定列后锁定列对应位置的横向滚动条无法拖动问题相关推荐

最新文章

热门文章