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点击单行修改背景色内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue 实现弹窗关闭后刷新效果
这篇文章主要介绍了vue 实现弹窗关闭后刷新效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue中使用unity3D如何实现webGL将要呈现的效果
这篇文章主要介绍了vue中使用unity3D如何实现webGL将要呈现的效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
vue-openlayers实现地图坐标弹框效果
这篇文章主要为大家详细介绍了vue-openlayers实现地图坐标弹框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
Vue3+Vite+TS使用elementPlus时踩的坑及解决
这篇文章主要介绍了Vue3+Vite+TS使用elementPlus时踩的坑及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Vue3样式渗透之deep()为什么无效详解
项目开发中因为ui设计常常需要修改vue常用的组件库（element,antD等等）,这就需要用到样式穿透,下面这篇文章主要给大家介绍了关于Vue3样式渗透之deep()为什么无效的相关资料,需要的朋友可以参考下
2022-11-11
Vue学习笔记进阶篇之多元素及多组件过渡
本篇文章主要介绍了Vue学习笔记进阶篇之多元素及多组件过渡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
Vue Hook Event 深度解读
Hook Event 是 Vue 的自定义事件结合生命周期钩子实现的一种从组件外部为组件注入额外生命周期方法的功能，本文重点给大家介绍Vue Hook Event 解读，感兴趣的朋友一起看看吧
2023-01-01
vue3使用threejs实现3D卡片水平旋转效果的示例代码
这篇文章主要介绍了在vue3中使用threejs实现3D卡片水平旋转效果,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2024-04-04
Vue2 cube-ui时间选择器详解
这篇文章主要为大家介绍了Vue2 cube-ui时间选择器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
详细聊聊vue中组件的props属性
父子组件之间的通信就是props down,events up,父组件通过属性props向下传递数据给子组件,子组件通过事件events 给父组件发送消息,这篇文章主要给大家介绍了关于vue中组件的props属性的相关资料,需要的朋友可以参考下
2021-11-11