脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → el-table点击单行修改背景色

element-plus中el-table点击单行修改背景色方法

 更新时间：2023年07月08日 10:49:43   作者：叶子_o  
这篇文章主要给大家介绍了关于element-plus中el-table点击单行修改背景色的相关资料,这是产品新加了的一个需求,分享给同样遇到这个需求的朋友,需要的朋友可以参考下

需求描述：

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

 总结

到此这篇关于element-plus中el-table点击单行修改背景色的文章就介绍到这了,更多相关el-table点击单行修改背景色内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论