前言
在用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引入
