美文网首页
el-table 固定列之后 左侧边框消失(偶发)

el-table 固定列之后 左侧边框消失(偶发)

作者: jeneen1129 | 来源:发表于2023-08-02 17:33 被阅读0次

问题描述

如图所示,有时候列表就这样了



本来以为是偶发的,不好找到问题所在,不知道怎么改这个问题,
哈哈哈哈,被自己拖出来了,你就在固定列左侧边框慢慢拖,总能拖到介于下面这两种状态(不出现滚动条和出现滚动条)之间的bug状态



问题思考

肯定是宽度哪里的问题设置导致了这个左侧边框就看不见了。
看了下,发现这边表格隐藏和显示的有位置差别,设置table font-size: 0; 有效去除不必要空隙,明显感觉到出现这种状况的拖动范围小了,但是怎么还有咋解决呢?
看网上的解决办法就是说这边要不加上border-left,要不就是少了1px,但是更改都会改变完好状态的时候的样式,不大可取。

还没找到好办法,不行就设置下列宽度吧

下面是找到的代码进行的尝试(本人尝试了,都没有效果):


  1. right
    说明:// 这种 改 right 都会导致最外层的边框可能有点错位
.el-table {
 .el-table__row {
    td:not(.is-hidden):last-child {
      right:  -1px
    }
  }
  table thead tr th:last-child {
    right: 1px;
  }
}
  1. 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;
      }
    }
  1. 实战调试
    不会有任何副作用,哈哈哈,不过 是有滚动轴的时候


.el-table--scrollable-y .el-table__body-wrapper:not(.is-scrolling-none) ~ .el-table__fixed-right {
    right: 6px !important;
  }

相关文章

网友评论

      本文标题:el-table 固定列之后 左侧边框消失(偶发)

      本文链接:https://www.haomeiwen.com/subject/tarppdtx.html