Vue+element使用row-class-name修改el-table某一行解決背景色無(wú)效的方法
項(xiàng)目場(chǎng)景：
要實(shí)現(xiàn)這樣的一個(gè)功能：為列表特定某一行的背景高亮，如下圖，實(shí)現(xiàn)某一行的權(quán)限字段是超級(jí)，那么這行就高亮顯示的效果
問題描述：
根據(jù)element-ui中el-table中的row-class-name 屬性設(shè)置
可以通過指定 Table 組件的 row-class-name 屬性來為 Table 中的某一行添加 class，表明該行處于某種狀態(tài)。
template代碼
<template>
<el-table :data="admin_list" stripe style="width: 100%" :row-class-name="tableRowClassName">
<el-table-column prop="name" label="姓名" min-width="100"></el-table-column>
<el-table-column prop="username" label="用戶名"></el-table-column>
<el-table-column label="權(quán)限">
<template slot-scope="scope">
{{ scope.row.roleName === 'ORG_ADMIN' ? '普通' : '超級(jí) ' }}
</template>
</el-table-column>
<el-table-column prop="status" label="狀態(tài)">
<template slot-scope="scope">
<el-tag :type="scope.row.status === 'LOCKED' ? 'warning' : 'success'" disable-transitions>
<i :class="scope.row.status === 'LOCKED' ? ' el-icon-lock' : ' el-icon-user'"></i>
{{ scope.row.status === 'LOCKED' ? '鎖定' : '正常' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="telephone" label="電話"></el-table-column>
<el-table-column prop="email" label="郵箱"></el-table-column>
<el-table-column label="操作" align="center" width="245" fixed="right" prop="status">
<template slot-scope="scope">
<el-button :type="scope.row.status === 'LOCKED' ? 'success' : 'warning'" @click="addAdmin(scope.$index)" size="small">{{ scope.row.status === 'LOCKED' ? '解鎖' : '鎖定' }}</el-button>
<el-button type="primary" @click="edit(scope.$index)" size="small">編輯</el-button>
<el-button type="danger" size="small" @click="del(scope.$index)">刪除</el-button>
</template>
</el-table-column>
</el-table>
</template>
js代碼
<script>
// 為超級(jí)管理員那一行設(shè)置背景樣式
tableRowClassName({row,rowIndex}) {
if (row.roleName === "ORG_SUPER_ADMIN") {
console.log(rowIndex)
return 'warning-row'
}
return ''
},
</script>
css代碼
<style lang="less" scoped>
.el-table .warning-row {
background:#F8ECDA;
color:red //測(cè)試
}
</style>
但是問題來了！我設(shè)置背景顏色竟然不生效！上網(wǎng)根據(jù)各位大神分享的經(jīng)驗(yàn)貼，提出了幾種解決方法：可去掉scoped；或者使用深度選擇器（在css類前面加/deep/ ），或者把此樣式寫在全局css中，或者也可以在在文件中加一個(gè)style標(biāo)簽可以解決設(shè)置樣式問題。
原因分析：
這么做是因?yàn)?code>row-class-name屬性要想生效必須使用全局class，且使用 scoped 后，父組件的樣式將不會(huì)滲透到子組件中。
但是新的問題出現(xiàn)了，color:red生效了，但background:#F8ECDA;并不生效！
進(jìn)一步分析原因：原來是因?yàn)檫@個(gè)表格設(shè)置了斑馬格樣式，而斑馬格樣式默認(rèn)有背景色，所以背景高亮不生效
stripe屬性可以創(chuàng)建帶斑馬紋的表格。它接受一個(gè)Boolean，默認(rèn)為false，設(shè)置為true即為啟用。
所以要么去掉stripe屬性，要么設(shè)置樣式優(yōu)先級(jí)（一定要加td 否則不生效）
.el-table .warning-row td{
background:#F8ECDA !important;
color:red
}
推薦解決方案：
不建議去掉scoped，否則全局樣式會(huì)失效
第一種方式 ：使用深度選擇器（推薦）
//1. 要使用深度選擇器+td
//2. 因?yàn)閠able默認(rèn)有背景色，所以在設(shè)置背景色的時(shí)要寫td，并設(shè)置優(yōu)先級(jí)
/deep/ .el-table .warning-row td{
background:#F8ECDA !important;
color:red
}
第二種方式：使用全局css,并在main.js中引入
.el-table .warning-row td{
background:#F8ECDA !important;
color:red
}
main.js
import './assets/css/global.css'
第三種方式：在頁(yè)面中加一個(gè)style標(biāo)簽
<style>
.el-table .warning-row td {
background: #f8ecda !important;
color: red;
}
</style>
到此這篇關(guān)于Vue+element使用row-class-name修改el-table某一行解決背景色無(wú)效的方法的文章就介紹到這了,更多相關(guān)修改el-table背景色無(wú)效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端判斷手指在屏幕滑動(dòng)方向，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
談一談vue請(qǐng)求數(shù)據(jù)放在created好還是mounted里好
這篇文章主要介紹了談一談vue請(qǐng)求數(shù)據(jù)放在created好還是mounted里好的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue實(shí)現(xiàn)數(shù)字時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)數(shù)字時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了vue中常見循環(huán)遍歷指令的使用 v-for，包括v-for遍歷數(shù)組，v-for遍歷json對(duì)象,本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-04-04
本文講解了如何在Linux環(huán)境中部署Vue項(xiàng)目,包括安裝依賴、編譯項(xiàng)目、安裝配置Nginx,并介紹了SSL證書安裝與配置,詳細(xì)說明了使用Nginx作為靜態(tài)資源服務(wù)器和反向代理的步驟,以及進(jìn)行性能、安全性測(cè)試和備份的重要性,需要的朋友可以參考下2024-09-09
Vue實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
富文本編輯器vue2-editor實(shí)現(xiàn)全屏功能
這篇文章主要介紹了富文本編輯器vue2-editor實(shí)現(xiàn)全屏功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue中使用svg畫路徑圖的相關(guān)知識(shí)，在這大家需要注意svg中不能使用html標(biāo)簽，例如div，img等，因此在svg中一般使用image標(biāo)簽放置圖片，text圖片放置文本內(nèi)容,詳細(xì)代碼跟隨小編一起看看吧2022-04-04
這篇文章主要給大家介紹了關(guān)于vue3中refs用法舉例的相關(guān)資料,Vue.js中的$refs是一個(gè)對(duì)象,它持有已注冊(cè)過ref特性的所有組件和元素,需要的朋友可以參考下2023-08-08
uni-app是一款基于Vue.js的跨平臺(tái)開發(fā)框架，它借助了 Vue.js 的語(yǔ)法和組件化開發(fā)思想，本文將詳細(xì)介紹 uni-app 的全局配置、靜態(tài)資源管理、路由管理以及數(shù)據(jù)通信和狀態(tài)管理的進(jìn)階使用技巧,需要的朋友可以參考下2023-06-06