vue筆記一：設置表頭的背景顏色以及下邊框顏色

　　最近做的一個項目有個小小的需求，就是把表頭的背景顏色改為黑色，表格邊框顏色改為這個顏色，中間出了些問題，因為vue的表格樣式是內聯樣式，一修改就影響到其他地方的表格樣式，盡管我單獨加了id還是不行，經歷了一些曲折，最后終於解決了。

我用的是vue表格里的header-cell-style屬性

 

 

<el-table class='listtable' :data="tableData" style="width: 100%;" :header-cell-style="headStyleFun">
...
</el-table>

methods: {
            headStyleFun({row, rowIndex}){
                return 'background-color: #000;border-bottom: 1px solid rgb(28, 202, 213);'
            },
}

然后就解決了，看一看效果圖

 

但是一開始，我這樣寫

<el-table class='listtable' :data="tableData" style="width: 100%;" :header-cell-style="{background:'#000',border-bottom:'1px solid rgb(28, 202, 213)'}">
...
</el-table>

樣式就會報錯

 

 但是把border-bottom去掉，只剩background就不會出錯，具體原因我猜想是這個屬性不支持border-bottom吧。

 

最后，歡迎大家關注我的公眾號，現在是主攻Java