发现问题
我方产品将于五秒后到达战场…
刚在对照原型做项目的时候突然发现了这样一个表格:
产品说他的这个数据表表格不要周边的边框,但是中间要边框分隔,嗯?这是什么需求,我说这个不好弄,产品说我就要,如何实现我不管。那我能怎么办呢(摊手),于是我找了下文档。嘿!找到了!border!
于是我兴高采烈的加上了这行代码:
<el-table
border
:data="dataList"
加完之后:
嗯?这个四周的边框是什么鬼??
解决
看来还得接着改,于是一层一层地去找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;
}
效果如下:
完成!
写在最后
代码是撸不完的。。。这辈子撸不完的。。。加油哦小老弟们。希望这边文档能给您带来一些帮助,感谢阅读。