解决ElementUItable表格的边框隐藏
解决ElementUI table表格的边框隐藏
发现问题
我⽅产品将于五秒后到达战场…
刚在对照原型做项⽬的时候突然发现了这样⼀个表格：
产品说他的这个数据表表格不要周边的边框，但是中间要边框分隔，嗯？这是什么需求，我说这个不好弄，产品说我就要，如何实现我不管。那我能怎么办呢（摊⼿），于是我了下⽂档。嘿！到了！border！
于是我兴⾼采烈的加上了这⾏代码：
<el-table
border
:data="dataList"
加完之后：
table设置内边框
嗯？这个四周的边框是什么⿁？？
解决
看来还得接着改，于是⼀层⼀层地去DOM，发现Element⽤的⽅法和我们平常写表格类似，最外⾯的⽗级写上“上左”border，内容
写“右下”border，于是我赶紧重置：border:none；设置完之后⼀看，“上左”border确实没了，“右下”border怎么还在，看来不是这样写的？于是我⼜了⼀遍，可算给我着了：原来Element在写“右下”border的时候⽤的是伪类：
不厚道啊⼩⽼弟，⼜⽤绝对定位，既然到了那就开⼲啦（注意：在你的重置样式表或者common.css内添加，不要放到当前组件的scoped中，会不起作⽤）：
.el-table--border,.el-table--group{
border: none;
}
.el-table__header-wrapper th:nth-last-of-type(2){
border-right: none;
}
.el-table--border td:nth-last-of-type(1){
border-right: none;
}
.el-table--border::after,.el-table--group::after{
width:0;
}
效果如下：
完成！
写在最后
代码是撸不完的。。。这辈⼦撸不完的。。。加油哦⼩⽼弟们。希望这边⽂档能给您带来⼀些帮助，感谢阅读。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。