使用element-ui組件el-table時須要修改某一行或列的樣式（包含解決選擇器無效問題）

　　在後臺管理系統項目中，常常會使用element-ui中的組件el-table（表格）來展現列表數據。

　　當展現數據的時候，可能就須要給給某一行或者列設置特殊的樣式，在查詢文檔是我遇到了一些問題：包括設置某一行或列樣式的方式；包括設置指定類名後選擇器無效問題。。。。

　　首先介紹一下，個人項目需求是列表中展現詳細信息的一列，最多隻展現兩行數據，超出時使用...表示。

　　實現結果以下圖所示：

　　 

 

 　　

　　下面介紹一下實現方式：

 

方法一（不推薦，複雜、並且表格稍有錯位）：

　　1.查閱element-ui官方文檔後咱們發現有以下屬性：

　　

 　　2.爲表格添加該屬性，並指定函數名：

　　

 　　3.在methods中定義addClass方法，給「詳細信息」列添加類名：

　　

　　4.在<style></style>中設置指定css樣式：

　　

　　在通過以上步驟後，本覺得就應該是實現了需求，可是查看頁面後發現，並無成功！！！！！

　　

　　這時點開控制檯發現，類名已經添加成功了，可是選擇器樣式卻無效。。。。。。

　　

　　害我查了很久的資料o(╥﹏╥)o，才知道有如下解決辦法——使用全局屬性：

　　在elementUI中，row-class-name、row-style、cell-class-name等屬性要想生效必須使用全局class才能生效。由於以前的代碼都是在組件中編寫的，因此去除中的scoped便可該組件中的樣式變爲全局屬性。

　　再看上面的代碼，我將選擇器定義在了局部：

　　

　　5.修改成全局樣式：

　　因此就再單獨寫一個<style></style>標籤書寫全局樣式便可：

　　

 

　　至此，咱們就實現了預期的效果： 

 

 

方法二（推薦，簡單且顯示正常）：

　　下面咱們介紹一種簡單易行的方法——使用<template></template>

　　

 

　　如上圖所示，使用<template></template>並給其添加scope屬性，再內嵌一層設置有相應類名的<span></span>包裹要展現的內容。固然，編寫相應的CSS屬性選擇器也是必須的，與方法一選擇器內容相同。

 

　　

 

 

　　這樣就能夠了，超級簡單！！！效果圖就不展現了，反正沒有錯位~~~