问题描述
如图所示,有时候列表就这样了
![](https://img.haomeiwen.com/i17273442/5ec9ba2a68b765c7.png)
本来以为是偶发的,不好找到问题所在,不知道怎么改这个问题,
哈哈哈哈,被自己拖出来了,你就在固定列左侧边框慢慢拖,总能拖到介于下面这两种状态(不出现滚动条和出现滚动条)之间的bug状态
![](https://img.haomeiwen.com/i17273442/f16c4f94c5441a29.png)
![](https://img.haomeiwen.com/i17273442/602b19feb3844989.png)
问题思考
肯定是宽度哪里的问题设置导致了这个左侧边框就看不见了。
看了下,发现这边表格隐藏和显示的有位置差别,设置table font-size: 0;
有效去除不必要空隙,明显感觉到出现这种状况的拖动范围小了,但是怎么还有咋解决呢?
看网上的解决办法就是说这边要不加上border-left
,要不就是少了1px
,但是更改都会改变完好状态的时候的样式,不大可取。
还没找到好办法,不行就设置下列宽度吧
下面是找到的代码进行的尝试(本人尝试了,都没有效果):
![](https://img.haomeiwen.com/i17273442/1d66eb52a526bc5b.png)
- right
说明:// 这种 改 right 都会导致最外层的边框可能有点错位
.el-table {
.el-table__row {
td:not(.is-hidden):last-child {
right: -1px
}
}
table thead tr th:last-child {
right: 1px;
}
}
- border-left
说明:正常情况这边的 border 就会变成 2px
//表头
thead th:not(.is-hidden):last-child {
border-left: 1px solid #EBEEF5;
}
//表单
.el-table__row {
td:not(.is-hidden):last-child {
border-left: 1px solid #e4e7ec;
}
}
-
实战调试
不会有任何副作用,哈哈哈,不过 是有滚动轴的时候
.el-table--scrollable-y .el-table__body-wrapper:not(.is-scrolling-none) ~ .el-table__fixed-right {
right: 6px !important;
}
网友评论