devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：Cpp五条 | 2024-02-18 12:21:43

赞

踩

el-table选中行变色

9a69fede8b2044a79dd834e3e48f20b4.png前期回顾    89a5d93bcce94f7cbe42539567637cb3.gif 

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

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

 db0764c8e6c045d2a6d0ba3cb06a63ed.gif

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_6,color_FFFFFF,t_70,g_se,x_16

目录

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

 效果图：

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

 效果图：

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

 效果图：

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

  效果图：

 结语：

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

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

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

       行设置一样的 Style。  

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

 效果图：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

  1. <template>
  2.   <div id="">
  3.     <el-table
  4.       :data="tableData"
  5.       style="width: 100%"
  6.       :row-style="isRed"
  7.       @selection-change="selected"
  8.     >
  9.      
  10.       <el-table-column type="index" label="序号" width="80"> </el-table-column>
  11.       <el-table-column type="selection" width="50"> </el-table-column>
  12.       <el-table-column prop="date" label="日期" width="220"> </el-table-column>
  13.       <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
  14.       <el-table-column prop="address" label="年龄" width="240">
  15.       </el-table-column>
  16.     </el-table>
  17.   </div>
  18. </template>
  19.  
  20. <script>
  21. export default {
  22.   name: "",
  23.   data() {
  24.     return {
  25.       selectedArrData: [], // 把选择到的当前行的id存到数组中
  26.       tableData: [
  27.         {
  28.           date: "2016-05-02",
  29.           name: "王小虎",
  30.           address: "上海市普陀区金沙江路 1518 弄",
  31.           id: "1",
  32.         },
  33.         {
  34.           date: "2016-05-04",
  35.           name: "王小虎",
  36.           address: "上海市普陀区金沙江路 1517 弄",
  37.           id: "2",
  38.         },
  39.         {
  40.           date: "2016-05-01",
  41.           name: "王小虎",
  42.           address: "上海市普陀区金沙江路 1519 弄",
  43.           id: "3",
  44.         },
  45.         {
  46.           date: "2016-05-03",
  47.           name: "王小虎",
  48.           address: "上海市普陀区金沙江路 1516 弄",
  49.           id: "4",
  50.         },
  51.       ],
  52.     };
  53.   },
  54.   methods: {
  55.    
  56.     // 复选框被选中的事件
  57.     selected(row) {
  58.       // console.log(row);//点击的那行数据
  59.       this.selectedArrData = row;
  60.     },
  61.     isRed({ row }) {
  62.       const checkIdList = this.selectedArrData.map((item) => item.id);
  63.       if (checkIdList.includes(row.id)) {
  64.         return {
  65.           backgroundColor: "#DE6",
  66.           color: "red",
  67.         };
  68.       }
  69.     },
  70.   },
  71. };
  72. </script>

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

 效果图：

 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

  1. <template>
  2.   <div id="">
  3.     <el-table
  4.       :data="tableData"
  5.       style="width: 100%"
  6.       :row-style="isRed"
  7.       @row-click="rowClickEv"
  8.       border
  9.     >
  10.       <el-table-column type="index" label="序号" width="80"> </el-table-column>
  11.       <el-table-column type="selection" width="50"> </el-table-column>
  12.       <el-table-column prop="date" label="日期" width="220"> </el-table-column>
  13.       <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
  14.       <el-table-column prop="address" label="年龄" width="240">
  15.       </el-table-column>
  16.     </el-table>
  17.   </div>
  18. </template>
  19.  
  20. <script>
  21. export default {
  22.   name: "",
  23.   data() {
  24.     return {
  25.       selectedArrData: [], // 把选择到的当前行的id存到数组中
  26.       tableData: [
  27.         {
  28.           date: "2016-05-02",
  29.           name: "王小虎",
  30.           address: "上海市普陀区金沙江路 1518 弄",
  31.           id: "1",
  32.         },
  33.         {
  34.           date: "2016-05-04",
  35.           name: "王小虎",
  36.           address: "上海市普陀区金沙江路 1517 弄",
  37.           id: "2",
  38.         },
  39.         {
  40.           date: "2016-05-01",
  41.           name: "王小虎",
  42.           address: "上海市普陀区金沙江路 1519 弄",
  43.           id: "3",
  44.         },
  45.         {
  46.           date: "2016-05-03",
  47.           name: "王小虎",
  48.           address: "上海市普陀区金沙江路 1516 弄",
  49.           id: "4",
  50.         },
  51.       ],
  52.     };
  53.   },
  54.   methods: {
  55.     // 某一行被点击行触发事件，默认形参代表一整行数据
  56.     rowClickEv(row) {
  57.       // console.log(row);//点击的那行数据默认是对象{__ob__: Observer}，将其转数组
  58.       this.selectedArrData = [row];
  59.     },
  60.  
  61.     isRed({ row }) {
  62.       const checkIdList = this.selectedArrData.map((item) => item.id);
  63.       if (checkIdList.includes(row.id)) {
  64.         return {
  65.           backgroundColor: "#DE6",
  66.           color: "red",
  67.         };
  68.       }
  69.     },
  70.   },
  71. };
  72. </script>
  73. <style lang="scss" scoped>
  74. // 修改鼠标经过表格的颜色
  75. /deep/ .el-table tbody tr:hover > td {
  76.   // background-color: rebeccapurple !important;
  77.   // color: #ffffff;
  78.  
  79.   // 可以选择隐藏
  80.   background-color: transparent !important;
  81.  
  82. }
  83.  
  84. </style>

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

 效果图：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

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

  效果图：

 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

  1. <template>
  2.   <div id="">
  3.     <el-table
  4.       :data="tableData"
  5.       style="width: 100%"
  6.       :row-style="isRed"
  7.       border
  8.     >
  9.     <!-- 
  10.        @selection-change="selected" 复选框被选中的触发事件
  11.        @row-click="rowClickEv" 某一行被点击行触发事件
  12.        :row-style="isRed" 行的 style 的回调方法，也可以使用一个固定的 Object 为所有  
  13.        行设置一样的 Style。  
  14.      -->
  15.       <el-table-column type="index" label="序号" width="80"> </el-table-column>
  16.       <el-table-column type="selection" width="50"> </el-table-column>
  17.       <el-table-column prop="date" label="日期" width="220"> </el-table-column>
  18.       <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
  19.       <el-table-column prop="address" label="年龄" width="240">
  20.       </el-table-column>
  21.       <el-table-column label="操作">
  22.         <template slot-scope="scope">
  23.           <!--(scope.$index, scope.row) 下标和行 -->
  24.           <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
  25.             >编辑</el-button
  26.           >
  27.         </template>
  28.       </el-table-column>
  29.     </el-table>
  30.   </div>
  31. </template>
  32.  
  33. <script>
  34. export default {
  35.   name: "",
  36.   data() {
  37.     return {
  38.       selectedArrData: [], // 把选择到的当前行的id存到数组中
  39.       tableData: [
  40.         {
  41.           date: "2016-05-02",
  42.           name: "王小虎",
  43.           address: "上海市普陀区金沙江路 1518 弄",
  44.           id: "1",
  45.         },
  46.         {
  47.           date: "2016-05-04",
  48.           name: "王小虎",
  49.           address: "上海市普陀区金沙江路 1517 弄",
  50.           id: "2",
  51.         },
  52.         {
  53.           date: "2016-05-01",
  54.           name: "王小虎",
  55.           address: "上海市普陀区金沙江路 1519 弄",
  56.           id: "3",
  57.         },
  58.         {
  59.           date: "2016-05-03",
  60.           name: "王小虎",
  61.           address: "上海市普陀区金沙江路 1516 弄",
  62.           id: "4",
  63.         },
  64.       ],
  65.     };
  66.   },
  67.   methods: {
  68.     // 编辑事件
  69.     handleEdit(index,row) {
  70.       this.selectedArrData = [row];
  71.     },
  72. // 操作表格变色
  73.     isRed({ row }) {
  74.       const checkIdList = this.selectedArrData.map((item) => item.id);
  75.       if (checkIdList.includes(row.id)) {
  76.         return {
  77.           backgroundColor: "#DE6",
  78.           color: "red",
  79.         };
  80.       }
  81.     },
  82.   },
  83. };
  84. </script>
  85. <style lang="scss" scoped>
  86. // 修改鼠标经过表格的颜色
  87. /deep/ .el-table tbody tr:hover > td {
  88.   // background-color: rebeccapurple !important;
  89.   // color: #ffffff;
  90.  
  91.   // 可以选择隐藏
  92.   background-color: transparent !important;
  93. }
  94. </style>

 结语：

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/107866
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号