element-ui 設置table樣式不生效的問題

今天下午修改element-ui引用的table庫，樣式一直不生效。查閱了下資料，這是因為：

　　在vue一個組件中，style默認作用域是scoped，而elementUI中table的樣式設置不能在scoped中，

 

首先看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'