解决ElementUI table表格的边框隐藏

发现问题

我方产品将于五秒后到达战场…
刚在对照原型做项目的时候突然发现了这样一个表格：

产品说他的这个数据表表格不要周边的边框，但是中间要边框分隔，嗯？这是什么需求，我说这个不好弄，产品说我就要，如何实现我不管。那我能怎么办呢（摊手），于是我找了下文档。嘿！找到了！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;
  }

效果如下：

完成！

写在最后

代码是撸不完的。。。这辈子撸不完的。。。加油哦小老弟们。希望这边文档能给您带来一些帮助，感谢阅读。