element ui table表格添加选中行高亮效果

最新推荐文章于 2024-09-05 19:02:14 发布

天空中的星~

最新推荐文章于 2024-09-05 19:02:14 发布

阅读量3.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/workhard0905/article/details/112980694

vue 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何在Vue中利用`highlight-current-row`属性和`row-class-name`结合点击事件模拟表格行的高亮效果。通过`getArrayIndex`函数获取元素在数组中的位置，然后在`tableRowClassName`回调中设置行样式。当点击表格行时，更新`tableRowIndex`并重新加载数据，从而达到类似触发点击事件的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

table中有一个属性 highlight-current-row 可以实现表格当前选中的行高亮效果

但是有些时候我们不是通过点击但是想要触发他的点击事件类似于实现一种'trigeer'的效果

所以我选择了用 row-click点击事件和添加row-class-name属性

首先写一个函数可以获取元素在数组中的下标

  // 获取一个元素在数组中的下标
      getArrayIndex(arr, obj) {
        var i = arr.length;
        while (i--) {
          if (arr[i] === obj) {
            return i;
          }
        }
        return -1;
      },

 // 点击表格中的某一行---行的 class的回调方法
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === this.tableRowIndex) {
          return 'current-row'
        }
        return ''
      },

  // 点击表格中的一行
      tableItemClick(row, event, column) {
        this.tableRowIndex = this.getArrayIndex(this.patientTable, row); // 获取当前点击行下标
        this.getList();
      },

我们可以通过直接给data中的tableRowIndex 赋值，即可给行添加高亮效果