前军教程网

vue使用的公司真的越来越多了，不管是做前端还是做JavaWeb都得掌握了，今天在用到饿了么框架table时遇到一个巨坑的问题，无法修改table的样式，真的快吐血了。绝大部分修改框架的样式只需重写官方的样式即可。但是在Vue中elementUI的框架不行，主要有两点（坑）：（1）elementUI 的table样式是全局的（2）vue默认全局样式会覆盖局部

结合上面两个点的坑，你会发现你重写框架样式是无效的，因为vue默认全局样式会覆盖局部样式，而elementUI 的table样式是全局样式，你重写框架样式是局部样式。所以你重写的代码无效了

了解原理后我们就知道怎么修改它了，Vue中样式写法<style lang='scss' scoped> <\style>都会加入scoped，这个是组件中局部样式的一个定义，表示当前的样式只作用在当前组件。我这里列出两种方式修改table样式的方法，推荐第二种，（1）直接去掉scoped把局部样式变成全局样式，非常不推荐（2）在elementUI table用div包裹着，随意给该div定义一个类，例如<div class='div-table'>然后在样式中

<style lang='scss' scoped>
  .div-table  /deep/{
    .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{//这是重写table边框的颜色的一段代码
      border-color: #023afa;
    }
</style >

修改问题很简单，但是坑很大,附上一张效果图，我把tabel样式全都改了