element-plus el-table Click on a single row to modify the background color

Description of Requirement:

element-plus + el-table Click on the row to select and modify the background color + text color

Code:

method one:

focus:

• 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 itself provides this function, and it is more useful than the second method. The second method will not take effect when there are fixed columns, so it is recommended to use the first method directly

Method Two:

focus:

• @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" };
};