element-plus中el-table點擊單行修改背景色方法

更新時間：2023年07月08日 10:49:43 作者：葉子_o

這篇文章主要給大家介紹了關(guān)于element-plus中el-table點擊單行修改背景色的相關(guān)資料,這是產(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" };
};

總結(jié)

到此這篇關(guān)于element-plus中el-table點擊單行修改背景色的文章就介紹到這了,更多相關(guān)el-table點擊單行修改背景色內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue.JS入門教程之處理表單
這篇文章主要為大家詳細介紹了Vue.JS入門教程之處理表單,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
解決vue使用vant下拉框van-dropdown-item 綁定title值不變問題
這篇文章主要介紹了解決vue使用vant下拉框van-dropdown-item 綁定title值不變問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
在Vue中定義和調(diào)用過濾器的方法
過濾器(Filters)是 vue 為開發(fā)者提供的功能，常用于文本的格式化，這篇文章主要介紹了如何在Vue中定義和調(diào)用過濾器,需要的朋友可以參考下
2023-09-09
vue動態(tài)循環(huán)出的多個select出現(xiàn)過的變?yōu)閐isabled(實例代碼)
本文通過實例代碼給大家分享了vue動態(tài)循環(huán)出的多個select出現(xiàn)過的變?yōu)閐isabled效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
2019-11-11
關(guān)于Vue實現(xiàn)組件信息的緩存問題
這篇文章主要介紹了關(guān)于Vue實現(xiàn)組件信息的緩存問題的相關(guān)資料,需要的朋友可以參考下
2017-08-08
vue結(jié)合v-for和input實現(xiàn)多選列表checkbox功能
在Vue中,可通過v-for指令和v-model實現(xiàn)多選列表功能,首先,使用v-for指令遍歷數(shù)組生成列表項,每個列表項包含一個復選框,復選框的v-model綁定到一個數(shù)組變量,用于存儲選中的值,感興趣的朋友跟隨小編一起看看吧
2024-09-09
vue.js路由跳轉(zhuǎn)詳解
這篇文章主要為大家詳細介紹了vue.js路由跳轉(zhuǎn)的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
VUE 全局變量的幾種實現(xiàn)方式
這篇文章主要介紹了VUE 全局變量的幾種實現(xiàn)方式,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
關(guān)于vuejs中v-if和v-show的區(qū)別及v-show不起作用問題
v-if 有更高的切換開銷,而 v-show 有更高的出事渲染開銷.因此,如果需要非常頻繁的切換,那么使用v-show好一點;如果在運行時條件不太可能改變,則使用v-if 好點
2018-03-03
vue在.js文件中如何進行路由跳轉(zhuǎn)
這篇文章主要介紹了vue在.js文件中如何進行路由跳轉(zhuǎn)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12