公司的开发需求|点击《el-table》让选中的行变色，亲测实用 elementui|javascript|vue.js|需求分析

文章图片
前期回顾
文章图片

Vue项目实战 —— 哔哩哔哩移动端开发_0.活在风浪里的博客-CSDN博客撑着下班前半小时我用vue写《哔哩哔哩项目》移动端、新手还在哭、老鸟一直在笑。。。技术选型Vue2，技术栈有axios、Vh等，下班过来敲哈哈https://blog.csdn.net/m0_57904695/article/details/123594836
公司各种需求又来了，直接看下面文吧，一看就懂就不在说需求了，此时我觉得我的表情包是【我就像是一个小朋友站在路标下满头的问号】

文章图片
???????

文章图片

目录
第一种选中复选框表格变色
效果图：
第二种点击行表格变色 + 鼠标经过无hover效果
效果图：
第三种鼠标经过自定义hover颜色效果
效果图：
第四种点击某一事件表格背景色变化
效果图：

@selection-change="selected" 复选框被选中的触发事件
@row-click="rowClickEv" 某一行被点击行触发事件
:row-style="isRed" 行的 style 的回调方法，也可以使用一个固定的 Object 为所有
行设置一样的 Style。

第一种选中复选框表格变色效果图：

文章图片

第二种点击行表格变色 + 鼠标经过无hover效果效果图：

文章图片

// 修改鼠标经过表格的颜色 /deep/ .el-table tbody tr:hover > td { // background-color: rebeccapurple !important; // color: #ffffff; // 可以选择隐藏 background-color: transparent !important; }

第三种鼠标经过自定义hover颜色效果效果图：

文章图片

第四种点击某一事件表格背景色变化效果图：

文章图片

// 修改鼠标经过表格的颜色 /deep/ .el-table tbody tr:hover > td { // background-color: rebeccapurple !important; // color: #ffffff; // 可以选择隐藏 background-color: transparent !important; }