详解element-ui表格中勾选checkbox,高亮当前行


Posted in Javascript onSeptember 02, 2019

我们在做后台管理系统的时候经常需要操作表格,这里我们要实现的一个功能就是,勾选复选框,高亮显示当前行,也就是当前行样式改变。这是一个非常常见的使用场景,官网给我们提供了一个带Checkbox的table表格,但是并没有给出上述使用案例,解决办法有很多,我简单总结下我自己的实现过程,希望能帮助到有同样需求的小伙伴。

详解element-ui表格中勾选checkbox,高亮当前行

勾选表格中当前项时会触发selection-change事件,在<el-table>中绑定handleSelectionChange方法。

<el-table
     @selection-change="handleSelectionChange"
    >

编写handleSelectionChange方法,实现思路就是根据勾选当前行的下标,改变当前样式。但是element table表格中没有获取勾选后当前行index的方法,这里主要通过两个forEach遍历实现。

在data中定义tableData的时候一定要设置id属性,因为这里我们是通过id的对比来获取当前行的下标。

tableData: [{
     id:0,
     date: '2016-05-03',
     name: '王小虎',
     address: '上海市普陀区金沙江路 1518 弄'
    }

下列方法打印出来的i就是你要获取的勾选行的索引值,我们在data中定义一个空数组,专门用来存储选中项的下标,方便使用。

handleSelectionChange(val) {
    var arr = [];
    val.forEach((val, index) => {


this.tableData.forEach((v, i) => {



 // id 是每一行的数据id
      if(val.id == v.id){
       // console.log(i);
       arr.push(i)
      }
     })
    })  
    this.multipleSelection = arr;
   }

获取到下标之后就需要改变样式,给<el-table>标签绑定修改当前行样式的方法rowStyle

<el-table
     @selection-change="handleSelectionChange"
     :row-class-name="rowStyle"
    >

编写rowStyle方法,思路是循环便利multipleSelection数组,取出存储的下标,与当前行下标做对比,如果相同则返回rowStyle,改变当前行的样式。

这里需要注意一个问题:

forEach中return无效!我们希望达到某一条件时,跳出循环,代码终止,使用forEach进行遍历是无法实现的。

原因:forEach()无法在所有元素都传递给调用的函数之前终止遍历!

this.multipleSelection.forEach((v)=>{
     if(rowIndex === v){
      return 'rowStyle'
     }
    })

解决方法:使用for替换forEach

rowStyle({row, rowIndex}){
    let arr = this.multipleSelection;
    for(let i = 0; i < arr.length; i++){
     if(rowIndex === arr[i]){
      return 'rowStyle'
     }
    } 
   }

在style中定义选中行的样式

</style>
 .rowStyle{
  background-color:red!important;
 }
</style>

另外如果想更改鼠标移入的hover样式,要注意需要在td上修改,因为事件是添加在td身上的,在tr上修改无效。

.el-table{
   width: 1163px; 
   margin: 0 auto;
   .el-table__body{
    tr:hover>td{
     background-color:rgba(238,250,249,1)!important;
    }
   }
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Event学习第七章 事件属性
Feb 07 Javascript
javascript 实用的文字链提示框效果
Jun 30 Javascript
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
BootStrap表单控件之文本域textarea
May 23 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 Javascript
Moment的feature导致线上bug解决分析
Sep 23 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 #Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 #Javascript
Vue内部渲染视图的方法
Sep 02 #Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 #Javascript
Layui多选只有最后一个值的解决方法
Sep 02 #Javascript
解决layui checkbox 提交多个值的问题
Sep 02 #Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 #Javascript
You might like
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
jquery遍历input取得input的name
2009/04/27 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
jquery选择器简述
2015/08/31 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
Python的Django框架中的数据库配置指南
2015/07/17 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
python批量修改交换机密码的示例
2020/09/22 Python
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
数控专业大学生的自我鉴定
2013/11/13 职场文书
外贸学院会计专业应届生求职信
2013/11/14 职场文书
生产副总岗位职责
2013/11/28 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
小学老师对学生的评语
2014/12/29 职场文书