首页 > 其他 > 详细

elementUI中table点击高亮当前行的两种方式

时间:2020-11-12 10:46:22      阅读:975      评论:0      收藏:0      [点我收藏+]

1、highlight-current-row

设置css:

    tr.current-row > td,
    .el-table__body tr:hover > td {
      background: #f5f5f5;
    }

 

2、:row-class-name="tableRowClassName",需要借助@row-click="handleRowClick"获取当前点击行的下标

methods中定义tableRowClassName函数:

    handleRowClick(row) {
      this.tableRowIndex = this.getArrayIndex(this.tableData, row); // 获取当前点击行下标
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === this.tableRowIndex) {
        return ‘highlight-row‘
      }
      return ‘‘
    },
    // 获取一个元素在数组中的下标
    getArrayIndex(arr, obj) {
      var i = arr.length;
      while (i--) {
        if (arr[i] === obj) {
          return i;
        }
      }
      return -1;
    }

设置css:

    tr.highlight-row td {
      background-color: #fffbe0;
      color: #06aea6;
    }

 

 

 

x

elementUI中table点击高亮当前行的两种方式

原文:https://www.cnblogs.com/wuqilang/p/13962217.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!