zoukankan      html  css  js  c++  java
  • elementUI中table点击高亮当前行的两种方式

    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"获取当前点击行的下标

    data中定义:

      data() {
        return {
          tableRowIndex: 0
        }
      }

    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;
        }

    这两种方法的区别:

      需求:设置初始化时第一行高亮

      第一种方法需要设置一个类名定义好样式,默认为true即显示,当点击任一行时将该类设置为false即不显示;第二种方法只需在data中定义tableRowIndex的初始值为0,即默认展示第一条,当点击任一行时,由handleRowClick()方法记录下当前行的下标。

    x

  • 相关阅读:
    使用Redis做MyBatis的二级缓存
    MySQL 类型转换
    mysql store procedure 存储过程
    swagger
    redis 持久化
    redis 发布/订阅 模式
    dfs模板
    二叉树
    拓扑排序
    最大公因数(辗转相除法)
  • 原文地址:https://www.cnblogs.com/wuqilang/p/13962217.html
Copyright © 2011-2022 走看看