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'