el-table 動(dòng)態(tài)給每行增加class屬性的示例代碼
更新時(shí)間：2025年03月31日 10:52:52 作者：最初@
這篇文章主要介紹了el-table 動(dòng)態(tài)給每行增加class屬性的示例代碼,代碼簡單易懂,對(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來增加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 2.0 監(jiān)聽文本框內(nèi)容變化及ref的使用說明介紹
今天小編就為大家分享一篇基于Vue 2.0 監(jiān)聽文本框內(nèi)容變化及ref的使用說明介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue?vue-touch移動(dòng)端手勢詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家介紹了Vue編譯器解析compile源碼解析示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Vue2?Observer實(shí)例dep和閉包中dep區(qū)別詳解
這篇文章主要為大家介紹了Vue2?Observer實(shí)例dep和閉包中dep區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
在開發(fā)中我們想要給一個(gè)組件的顯示和消失添加某種過渡動(dòng)畫,可以很好的增加用戶體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于如何快速上手Vue3過渡動(dòng)畫的相關(guān)資料,需要的朋友可以參考下2022-02-02
Vue+UpLoad實(shí)現(xiàn)上傳預(yù)覽和刪除圖片的實(shí)踐
本文主要介紹了Vue+UpLoad實(shí)現(xiàn)上傳預(yù)覽和刪除圖片的實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
vue中element-ui組件默認(rèn)css樣式修改的四種方式
在前端項(xiàng)目中會(huì)運(yùn)用各種組件,有時(shí)組件的默認(rèn)樣式并不是你項(xiàng)目中所需要的,你需要更改樣式,下面這篇文章主要給大家介紹了關(guān)于vue中element-ui組件默認(rèn)css樣式修改的四種方式,需要的朋友可以參考下2021-10-10
Tiptap是一個(gè)無頭（headless）的富文本編輯器框架,專為?Web?工匠設(shè)計(jì),它提供了高度可定制和可擴(kuò)展的編輯器功能,適用于各種前端框架,這篇文章主要介紹了Vue中使用Tiptap富文本編輯器的相關(guān)資料,需要的朋友可以參考下2026-02-02
Vue移動(dòng)端實(shí)現(xiàn)調(diào)用相機(jī)掃描二維碼或條形碼的全過程
最近在使用vue開發(fā)的h5移動(dòng)端想要實(shí)現(xiàn)一個(gè)調(diào)用攝像頭掃描二維碼的功能,所以下面這篇文章主要給大家介紹了關(guān)于Vue移動(dòng)端實(shí)現(xiàn)調(diào)用相機(jī)掃描二維碼或條形碼的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
這篇文章主要給大家介紹了關(guān)于Vue.js列表渲染的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-05-05