详解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 相关文章推荐
json 入门基础教程 推荐
Oct 31 Javascript
javascript每日必学之运算符
Feb 16 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
JavaScript数组和对象的复制
Mar 21 Javascript
Vue动态实现评分效果
May 24 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 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
关于IIS php调用com组件的权限问题
2012/01/11 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
详解Python中的元组与逻辑运算符
2015/10/13 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
python机器学习之神经网络(一)
2017/12/20 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
python 检查文件mime类型的方法
2018/12/08 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
如何获得EntityManager
2014/02/09 面试题
厨师岗位职责
2013/11/12 职场文书
怎样客观的做好自我评价
2013/12/28 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
小学教师工作总结2015
2015/04/07 职场文书
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技
MySQL查询日期时间
2022/05/15 MySQL