element-ui 设置table样式不生效的问题

首先看vue默认css写法

<style scoped>

<style>

在vue一个组件中，style默认作用域是scoped，而elementUI中table的样式设置不能在scoped中，所以以下是处理办法:

方法一、去掉scoped

<style>
.el-table tr,
.el-table th,
.el-table td{
  background-color: rgba(204, 204, 204, .3);
}
<style>

方法二、添加在全局css样式中

先建立一个main.css

.el-table tr,
.el-table th,
.el-table td{
  background-color: rgba(204, 204, 204, .3);
}

然后在index.html的head中引入

<link rel="stylesheet" href="./static/css/main.css">

或者在main.js中添加以下语句

import '../static/css/main.css'