vxe-table
vxe-table copied to clipboard
数据表缩放后,部分cell的边框不显示了。
可复现的链接:
https://codesandbox.io/s/vxe-table-3-x-vue-2-6-wen-ti-yan-shi-forked-l2mm0
问题描述与截图:
期望的结果:
边框可以正常的显示
操作系统:
macOX
浏览器版本:
Chrome/96.0.4664.45
vue 版本:
2.6+
vxe-table 版本:
3.4.13
same as your question
我找到原因了,但不确定是不是这个引起的,.vxe-table--render-default.border--default .vxe-body--column里面有一个background-image,用这个设置的边框效果,如果使用border去设置边框好像就不会出现缩放的时候边框部分消失的现象
这个只能等官方的维护更新。看到的是边框都是background-image设置出来的。
same question
魔改了一下样式 @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 表头的线条和表体线条会重叠,要加多一句
.vxe-table--render-default .vxe-table--body tr:first-child .vxe-body--column {
border-top-color: transparent !important;
}