element table点击行变色

最新推荐文章于 2025-02-28 16:29:42 发布

Sun_逸圣

最新推荐文章于 2025-02-28 16:29:42 发布

阅读量1.5k

点赞数

分类专栏：前端文章标签： elementui

本文链接：https://blog.youkuaiyun.com/u013170178/article/details/116138610

版权

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用Element UI中的ElTable组件实现点击表格行时背景颜色变化的效果，并附带具体代码实现。通过设置stripe为false取消斑马纹，利用rowClick、rowClassName及rowStyle方法实现点击行变色。

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

代码片段：


 <el-table
        v-loading="dataListLoading"
        :data="dataList"
        border
        @selection-change="dataListSelectionChangeHandle"
        style="width: 100%;"
        :max-height="tableHeight"
        @row-click="rowClick"
        :row-class-name="rowClassName"
        :row-style="rowStyle"
        :stripe="false"
      >

主要代码

@row-click="rowClick"
:row-class-name="rowClassName"
:row-style="rowStyle"
:stripe="false"

stripe :

方法实现：

    // 当前点击行index
    rowClick (row) {
      this.rowIndex = row.index
    },
    // 把每行的 index 放入 row 中
    rowClassName ({ row, rowIndex }) {
      row.index = rowIndex
    },
    // 如果当前行index 是点击行，就改变颜色
    rowStyle ({ row, rowIndex }) {
      if (this.rowIndex === rowIndex) {
        return {
          'background-color': '#ffeecf !important'
        }
      }
    }

注意：

stripe 为 false,取消当前表格的斑马纹。点击才有变色效果。