欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

最新評(píng)論