場景

在Vue中使用el-table顯示數據，怎樣設置標題欄的顏色和設置每一行

隔一行顯示不同的顏色，實現效果如下

?

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

找到el-table標簽添加如下樣式和屬性設置

??? <el-tableclass="alarm"v-loading="loading":header-cell-style="{ background: '#0080D0' }":row-class-name="tableRowClassName">

然后class綁定的alarm樣式的實現

<style> .alarm .el-table__row td:nth-child(10) {color: #3be6f8; } </style>

row-class-name：行的 className 的回調方法，也可以使用字符串為所有行設置一個固定的 className。

然后row-class-name綁定的樣式實現

??? tableRowClassName({ row, rowIndex }) {if (rowIndex % 2 == 1) {return "statistics-warning-row";} else {return "";}},

?

?

?

總結

以上是生活随笔為你收集整理的el-table中怎样设置标题栏颜色以及每一行颜色交替不同的效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。