vue引入重写样式修改Element-UI表格背景色以及悬浮背景色，带操作的表格也可以修改呦~

前言

在用vue框架进行开发的时候，使用现成的UI组件库是十分方便的，但方便归方便，现成的它仍然不能满足我们所有的需求，为了达到预期的效果，我们仍需加以修改其样式，这里我采用的是将重写样式放入一个less文件中，再在需要修改样式的组件里引入从而达到修改该组件样式的效果。

一：新建一个放重写样式的less文件

二：重写样式

这里我修改的是表格的背景色，边框色，以及悬浮背景色

/*表格样式*/
.el-table{
  background-color: rgba(0,0,0,0.25);
  color: #FFFFFF;
  border-color: rgb(128,128,128);
  &:before,
  *:before{
    height: 0px!important;
  }
  th,tr,td,div{
    background-color: rgba(0,0,0,0);
  }
  th>.cell{
    color: #FFFFFF;
  }
  *{
    border-color: rgb(128,128,128) !important;
  }
  .el-table__header-wrapper{
    tr{
      background-color: rgba(0,0,0,0.25);
      th{
        color: #FFFFFF;
        background-color: rgba(0,0,0,0.4);
      }
    }
  }
  .el-table__body-wrapper{
    tr{
      background-color: rgba(0,0,0,0.1);
    }
    .el-table__empty-text{
      color: white;
    }
  }
  //修改带操作的表格背景色
  .el-table__row{
    &:hover{
      td{
        background-color: rgba(0,0,0,0.3) !important;
      }
    }
  }
  //修改固定右边操作的表格背景悬浮色
  .hover-row{
    td{
      background-color: rgba(0,0,0,0.3) !important;
    }
  }
}

三：vue组件引入重写样式

这里我采取的是@import引入

效果图