elelment ui表格操作中的一栏高亮显示

最新推荐文章于 2025-07-10 13:24:12 发布

bug的生产者

最新推荐文章于 2025-07-10 13:24:12 发布

阅读量516

点赞数

CC 4.0 BY-SA版权

分类专栏：项目中的小demo

本文链接：https://blog.youkuaiyun.com/qq_43209768/article/details/99634326

项目中的小demo 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用ElementUI的表格组件实现行高亮，以便用户在浏览大量数据时能记住当前操作的行。通过在table头部添加row-class-name属性，并在JS中定义tableRowClassName方法来设置高亮状态，当用户查看某条订单详情后返回，可以准确地定位到之前操作的数据行。

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

我们的后台有一些这样的表格，点击某一栏进入该笔订单的详情页，之后再退出详情页的时候，有时候会不记得自己操作的是哪一条数据，为了解决这个体验问题，我借助了element ui表格的高亮事件
在这里插入图片描述
html代码在table表格头上添加 :row-class-name="tableRowClassName"

<el-table :data="tableData" :border="false" :header-cell-style="getRowClass" :row-class-name="tableRowClassName">

js代码

 // 显示正在操作的那一条数据的状态
    tableRowClassName({ row, rowIndex }) {
        rowIndex = rowIndex+ (this.currentPage - 1) * 10
      if (rowIndex === this.colorHighLight) {
        return "warning-row";
      }
      return "";
    },

按钮的方法

    // 进入订单详情页面
    queryOrderDetail(index, row) {
      this.colorHighLight = index + (this.currentPage - 1) * 10
        this.$router.push({path:'/QueryDetail',query:{orderNo:row.orderNo,clientId:row.clientId}})
    },

css样式

.el-table .warning-row {
  background: oldlace;
}