vxe-table icon indicating copy to clipboard operation
vxe-table copied to clipboard

数据表缩放后,部分cell的边框不显示了。

Open ginkosen opened this issue 2 years ago • 3 comments

可复现的链接:

https://codesandbox.io/s/vxe-table-3-x-vue-2-6-wen-ti-yan-shi-forked-l2mm0

问题描述与截图:

image

期望的结果:

边框可以正常的显示

操作系统:

macOX

浏览器版本:

Chrome/96.0.4664.45

vue 版本:

2.6+

vxe-table 版本:

3.4.13

ginkosen avatar Jan 10 '22 10:01 ginkosen

same as your question

ctrlands avatar May 23 '22 08:05 ctrlands

我找到原因了,但不确定是不是这个引起的,.vxe-table--render-default.border--default .vxe-body--column里面有一个background-image,用这个设置的边框效果,如果使用border去设置边框好像就不会出现缩放的时候边框部分消失的现象

ctrlands avatar Jun 17 '22 09:06 ctrlands

这个只能等官方的维护更新。看到的是边框都是background-image设置出来的。

ginkosen avatar Jun 21 '22 07:06 ginkosen

same question

andyqier88 avatar May 08 '23 08:05 andyqier88

魔改了一下样式 @ginkosen @ctrlands

.vxe-table--render-default.border--full .vxe-body--column,
.vxe-table--render-default.border--full .vxe-footer--column,
.vxe-table--render-default.border--full .vxe-header--column,
.vxe-table--render-default.border--default .vxe-table--header-wrapper .vxe-header--row:last-child .vxe-header--gutter,
.vxe-table--render-default.border--full .vxe-table--header-wrapper .vxe-header--row:last-child .vxe-header--gutter,
.vxe-table--render-default.border--inner .vxe-table--header-wrapper .vxe-header--row:last-child .vxe-header--gutter,
.vxe-table--render-default.border--outer .vxe-table--header-wrapper .vxe-header--row:last-child .vxe-header--gutter,
.vxe-table--render-default.border--default .vxe-body--column,
.vxe-table--render-default.border--default .vxe-footer--column,
.vxe-table--render-default.border--default .vxe-header--column,
.vxe-table--render-default.border--inner .vxe-body--column,
.vxe-table--render-default.border--inner .vxe-footer--column,
.vxe-table--render-default.border--inner .vxe-header--column{
    background-image: none !important; 
    border-top: 1px solid #e8eaec !important;
    border-left: 1px solid #e8eaec !important;
}

.vxe-table--render-default .vxe-table--body{
    border-bottom: 1px solid #e8eaec !important;
    border-right: 1px solid #e8eaec !important;
}
.vxe-table--render-default.border--full .vxe-table--header-wrapper{
    border-right: 1px solid #e8eaec !important;
}

andyqier88 avatar May 09 '23 03:05 andyqier88

@andyqier88 表头的线条和表体线条会重叠,要加多一句

.vxe-table--render-default .vxe-table--body tr:first-child .vxe-body--column {
  border-top-color: transparent !important;
}

Planck-Ho avatar May 10 '23 03:05 Planck-Ho