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