<>需求描述:

element-plus + el-table 点击行选中并修改背景色+文字颜色

<>代码实现:

方法一:

重点:

* 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" }; };

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信