el-table 動態(tài)給每行增加class屬性的示例代碼
更新時間：2025年03月31日 10:52:52 作者：最初@
這篇文章主要介紹了el-table 動態(tài)給每行增加class屬性的示例代碼,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
el-table 動態(tài)給每行增加class屬性
html代碼
row-class-name屬性，綁定方法
:row-class-name=“tableRowClassName”,
<el-table :data="tableData" border :row-class-name="tableRowClassName"> </el-table>
js代碼
tableRowClassName({row, rowIndex})，接受到兩個參數(shù)
① row，行數(shù)據(jù)
② rowIndex， 行索引
tableRowClassName({row, rowIndex}) {
// 根據(jù)每行的數(shù)據(jù)，判斷isError來增加class屬性
if (row.row.isError === true) {
return 'warning-row'
} else {
return 'success-row'
}
// 根據(jù)行索引判斷，增加class屬性
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}css代碼
<style lang="scss" scoped>
::v-deep .el-table .warning-row {
color: #f24835 !important;
td{
color: #f24835 !important;
}
}
::v-deep .el-table .success-row{
color: #00c617 !important;
td{
color: #00c617 !important;
}
}
</style>到此這篇關于el-table 動態(tài)給每行增加class屬性的文章就介紹到這了,更多相關el-table 增加class屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue中巧用三元表達式解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue3自定義hooks/可組合函數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了Vue中如何對ElementUI的Dialog組件封裝問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
前端在el-dialog中嵌套多個el-dialog代碼實現(xiàn)
最近使用vue+elementUI做項目,使用過程中很多地方會用到dialog這個組件,有好幾個地方用到了dialog的嵌套,下面這篇文章主要給大家介紹了關于前端在el-dialog中嵌套多個el-dialog代碼實現(xiàn)的相關資料,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue多組件倉庫開發(fā)與發(fā)布詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了Vue項目配置在局域網(wǎng)下訪問方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue3+Element?Plus?v-model實現(xiàn)父子組件數(shù)據(jù)同步的案例代碼
這篇文章主要介紹了vue3+Element?Plus?v-model實現(xiàn)父子組件數(shù)據(jù)同步,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2024-01-01
本文通過實例代碼給大家介紹了vue中的無限循環(huán)，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
這篇文章主要介紹了vue中keep-alive的用法及問題描述,本文給大家介紹的非常詳細，具有一定的參考解決價值，需要的朋友可以參考下2018-05-05
vue中el-table格式化el-table-column內(nèi)容的三種方法
本文主要介紹了vue中el-table格式化el-table-column內(nèi)容的三種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08