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