点击《el-table》让选中的行变色,亲测实用

前期回顾     

Vue项目实战 —— 哔哩哔哩移动端开发_0.活在风浪里的博客-CSDN博客撑着下班前半小时我用vue写《哔哩哔哩 项目》移动端、新手还在哭、老鸟一直在笑。。。技术选型Vue2,技术栈有axios、Vh等,下班过来敲哈哈https://blog.csdn.net/m0_57904695/article/details/123594836

公司各种需求又来了,直接看下面文吧,一看就懂就不在说需求了 ,此时我觉得我的表情包是【我就像是一个小朋友站在路标下满头的问号】

 点击《el-table》让选中的行变色,亲测实用_第1张图片​​​​​​​

点击《el-table》让选中的行变色,亲测实用_第2张图片

目录

第一种选中复选框表格变色

 效果图:

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

 效果图:

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

 效果图:

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

  效果图:


       @selection-change="selected" 复选框被选中的触发事件

       @row-click="rowClickEv" 某一行被点击行触发事件

       :row-style="isRed" 行的 style 的回调方法,也可以使用一个固定的 Object 为所有 

       行设置一样的 Style。  

第一种选中复选框表格变色

 效果图:

点击《el-table》让选中的行变色,亲测实用_第3张图片




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

 效果图:

 点击《el-table》让选中的行变色,亲测实用_第4张图片





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

 效果图:

点击《el-table》让选中的行变色,亲测实用_第5张图片

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

  效果图:

 点击《el-table》让选中的行变色,亲测实用_第6张图片





 结语:

       最后祝大家都可以早早下班,早早回家,不为bug而烦恼,

,如果对你有微乎帮助,请点个收藏以备找时方便

你可能感兴趣的:(公司的开发需求,前端,elementui,javascript,vue.js,需求分析)