vue組件中使用elementUI的el-table組件的(row-class-name)動態修改每一行的樣式無效問題

問題描述
vue項目中，需要給vue表格中的每一行加入自定義的樣式，根據文檔給<el-table>組件加上row-class-name屬性即可，直接加入該屬性並且在當前vue組件中配置對應class發現樣式並沒有生效。

解決方案
一、使用全局屬性
在elementUI中，row-class-name、row-style、cell-class-name等屬性要想生效必須使用全局class才能生效。因爲之前的代碼都是在組件中編寫的，所以去除<style scoped></style>中的scoped即可該組件中的樣式變爲全局屬性。

當然這樣做有個缺陷，很容易引起因爲樣式重複定義導致意外錯誤，所以更推薦第二種解決方案。
二、使用深度選擇器/deep/ (css代碼前加上 /deep/ 即可)

/deep/ #myContent input{
  /* ... */
}

三、全局屬性，引用一個全局的css文件
 

<style scoped>
@import "../../assets/common.css";

// 其餘作用域內樣式代碼
</style>

四、混合樣式
 

<style scoped>
// 作用域內樣式代碼
<style>

<style>
// 位於子組件 不生效的樣式代碼
</style>