element-plus中el-table點(diǎn)擊單行修改背景色方法
更新時(shí)間：2023年07月08日 10:49:43 作者：葉子_o
這篇文章主要給大家介紹了關(guān)于element-plus中el-table點(diǎn)擊單行修改背景色的相關(guān)資料,這是產(chǎn)品新加了的一個(gè)需求,分享給同樣遇到這個(gè)需求的朋友,需要的朋友可以參考下
需求描述：
element-plus + el-table 點(diǎn)擊行選中并修改背景色+文字顏色
代碼實(shí)現(xiàn)：
方法一：
重點(diǎn)：
highlight-current-row
<el-table
highlight-current-row
>
/* 選中某行時(shí)的背景色*/
.el-table__body tr.current-row > td {
color: #28A458;
background: rgb(197, 213, 255) !important;
}element-plus 本身有給提供這個(gè)功能，而且比第二個(gè)方法更好用，第二個(gè)方法在有列固定的情況下，樣式會(huì)不生效，所以建議直接用第一種
方法二：
重點(diǎn)：
- @row-click
- :row-style
<el-table :data="detectionTableList" stripe style="width: 100%" height="250" @row-click="handleSelect" :row-style="cellStyle" >
const state = reactive({
checkNumber: "", // 存儲(chǔ)選中的
})
// 單擊選中一行
const handleSelect = (row: getRecordItem) => {
state.checkNumber = row.checkNumber; // 我這里 checkNumber 是唯一的
};
// 更改選中行背景色
const cellStyle = (row: any) => {
if (state.checkNumber === row.row.checkNumber) { // 注意?。?！這里是 row.row.checkNumber
return {
backgroundColor: "rgb(197, 213, 255) !important",
color: "#28A458 !important",
cursor: "pointer",
};
}
return { cursor: "pointer" };
};總結(jié)
到此這篇關(guān)于element-plus中el-table點(diǎn)擊單行修改背景色的文章就介紹到這了,更多相關(guān)el-table點(diǎn)擊單行修改背景色內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家分享了vue多級(jí)多選菜單組件開(kāi)發(fā)案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要幫助大家簡(jiǎn)單的理解vue中Props屬性，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
vxe-table?實(shí)現(xiàn)表格數(shù)據(jù)分組功能(按指定字段數(shù)據(jù)分組)
文章介紹了如何使用樹(shù)結(jié)構(gòu)實(shí)現(xiàn)表格數(shù)據(jù)分組,并提供了官方文檔的鏈接,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-11-11
這篇文章主要為大家詳細(xì)介紹了如何在Vue3中使用jsx/tsx的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的小伙伴可以了解下2024-02-02
vue動(dòng)態(tài)綁定多個(gè)類(lèi)名方法詳解(:class動(dòng)態(tài)綁定多個(gè)類(lèi)名)
vue中可以通過(guò):class=""這樣來(lái)根據(jù)一定的條件來(lái)動(dòng)態(tài)添加class,但是有時(shí)候需要判斷的條件比較多,需要?jiǎng)討B(tài)添加的class也比較多,下面這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)綁定多個(gè)類(lèi)名(:class動(dòng)態(tài)綁定多個(gè)類(lèi)名)的相關(guān)資料,需要的朋友可以參考下2022-11-11
React和Vue實(shí)現(xiàn)路由懶加載的示例代碼
路由懶加載是一項(xiàng)關(guān)鍵技術(shù),它可以幫助我們提高Web應(yīng)用的加載速度,本文主要介紹了React和Vue實(shí)現(xiàn)路由懶加載的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
這篇文章主要介紹了vue 使用OSS上傳圖片或附件講解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
axios請(qǐng)求中以params或body形式傳遞參數(shù)的區(qū)別淺析
最近在做自己項(xiàng)目中,做一個(gè)非常簡(jiǎn)單的新增用戶(hù)場(chǎng)景,但是使用原生axios發(fā)送post請(qǐng)求的時(shí)候,還是踩了不少坑的,下面這篇文章主要給大家介紹了關(guān)于axios請(qǐng)求中以params或body形式傳遞參數(shù)的區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要為大家介紹了Vue之組件的自定義事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
springboot + vue+elementUI實(shí)現(xiàn)圖片上傳功能
文章描述了如何使用Element UI的el-upload組件實(shí)現(xiàn)前端圖片上傳,并將圖片存儲(chǔ)到后端數(shù)據(jù)庫(kù),同時(shí)在頁(yè)面上回顯上傳的圖片,后端通過(guò)接口接收?qǐng)D片,并將其存儲(chǔ)在指定位置,然后返回圖片路徑以便在前端顯示,本文給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-01-01