el-table点击每一行加背景颜色

HTML

html 复制代码
<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      @row-click="clickData"
      :row-class-name="tableRowClassName"
      >
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

JS

javascript 复制代码
<script>
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      activeIndex: 0
    }
  },
  methods: {
    clickData (row) {
      console.log(row.index)
      this.activeIndex = row.index
    },
    tableRowClassName ({ row, rowIndex }) {
      row.index = rowIndex // 浅拷贝,让row有index
      if (rowIndex === this.activeIndex) {
        return 'success-row'
      }
    }
  }
}
</script>

CSS

css 复制代码
// 必须加组件穿透和优先级最高
::v-deep .el-table .success-row {
  background: pink !important;
}

总结:

相当于是没次点击给它加个class类名,用到的是el-table的属性名【row-class-name】,然后还有每一行的点击事件【row-click】

给每一行滑过加高亮:

css 复制代码
// 鼠标滑入每一行高亮
::v-deep .el-table__body tr:hover>td{
  background-color: pink !important;
}

// 鼠标滑入每一行取消高亮
::v-deep .el-table__body tr:hover>td {
  background-color: transparent;
}
相关推荐
鱼樱前端11 分钟前
今天介绍下最新更新的Vite7
前端·vue.js
独立开阀者_FwtCoder1 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句1 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom1 小时前
JavaScript reduce()函数详解
javascript
小飞悟1 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子1 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手2 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
炒毛豆2 小时前
vue3.4中的v-model的用法~
前端·vue.js
前端康师傅2 小时前
JavaScript 中你不知道的按位运算
前端·javascript
tianchang3 小时前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范