Vue+element使用row-class-name修改el-table某一行解決背景色無(wú)效的方法
項(xiàng)目場(chǎng)景：
要實(shí)現(xiàn)這樣的一個(gè)功能：為列表特定某一行的背景高亮，如下圖，實(shí)現(xiàn)某一行的權(quán)限字段是超級(jí)，那么這行就高亮顯示的效果
問(wèn)題描述：
根據(jù)element-ui中el-table中的row-class-name 屬性設(shè)置
可以通過(guò)指定 Table 組件的 row-class-name 屬性來(lái)為 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>
但是問(wèn)題來(lái)了！我設(shè)置背景顏色竟然不生效！上網(wǎng)根據(jù)各位大神分享的經(jīng)驗(yàn)貼，提出了幾種解決方法：可去掉scoped；或者使用深度選擇器（在css類前面加/deep/ ），或者把此樣式寫(xiě)在全局css中，或者也可以在在文件中加一個(gè)style標(biāo)簽可以解決設(shè)置樣式問(wèn)題。
原因分析：
這么做是因?yàn)?code>row-class-name屬性要想生效必須使用全局class，且使用 scoped 后，父組件的樣式將不會(huì)滲透到子組件中。
但是新的問(wèn)題出現(xiàn)了，color:red生效了，但background:#F8ECDA;并不生效！
進(jìn)一步分析原因：原來(lái)是因?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í)要寫(xiě)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)文章
Vue-router 中hash模式和history模式的區(qū)別
這篇文章主要介紹了Vue-router 中hash模式和history模式的區(qū)別，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
vue?element-plus圖片預(yù)覽實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue?element-plus圖片預(yù)覽實(shí)現(xiàn)的相關(guān)資料,最近的項(xiàng)目中有圖片預(yù)覽的場(chǎng)景,也是踩了一些坑,在這里總結(jié)一下,需要的朋友可以參考下2023-07-07
vue路徑分為絕對(duì)路徑、相對(duì)路徑、~+路徑?及?別名+路徑,在js中,引入帶別名的文件路徑,不需要在別名前加~?,在css或者style中引入的需要在路徑前面加~,路徑以?~?開(kāi)頭,其后的部分將會(huì)被看作模塊依賴,本文給大家介紹vue中引用文件路徑問(wèn)題,感興趣的朋友一起看看吧2023-12-12
vue elementui el-table 表格里邊展示四分位圖效果(功能實(shí)現(xiàn))
這篇文章主要介紹了vue elementui el-table 表格里邊展示四分位圖效果(功能實(shí)現(xiàn)),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-04-04
element?table?表格控件實(shí)現(xiàn)單選功能
本文主要介紹了element?table?表格控件實(shí)現(xiàn)單選功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
解決vue bus.$emit觸發(fā)第一次$on監(jiān)聽(tīng)不到問(wèn)題
這篇文章主要介紹了解決vue bus.$emit觸發(fā)第一次$on監(jiān)聽(tīng)不到問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
本篇文章主要介紹了vue-cli如何添加less 以及sass，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定
這篇文章主要為大家詳細(xì)介紹了vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定，幫大家解析神秘的Object.defineProperty方法2017-03-03
Vue無(wú)后端配合實(shí)現(xiàn)導(dǎo)出功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue如何在無(wú)后端配合的情況下實(shí)現(xiàn)導(dǎo)出功能,文中的示例代碼簡(jiǎn)潔易懂,有需要的小伙伴可以跟隨小編一起了解一下2024-01-01
vue使用canvas畫(huà)布實(shí)現(xiàn)平面圖點(diǎn)位標(biāo)注功能(最新推薦)
這篇文章主要介紹了vue使用canvas畫(huà)布實(shí)現(xiàn)平面圖點(diǎn)位標(biāo)注功能,經(jīng)過(guò)本文一番研究發(fā)現(xiàn)canvas標(biāo)簽可以完成很多功能，電子簽名，點(diǎn)位標(biāo)注，問(wèn)題標(biāo)注，畫(huà)圖功能，感興趣的朋友跟隨小編一起看看吧2023-07-07