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