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;
}
相关推荐
再学一点就睡1 小时前
双 Token 认证机制:从原理到实践的完整实现
前端·javascript·后端
随风飞翔的胖子1 小时前
js-cookie详细介绍及在vue3中的使用方法
vue.js·浏览器
幻灵尔依2 小时前
前端编码统一规范
javascript·vue.js·代码规范
欢脱的小猴子2 小时前
VUE3加载cesium,导入czml的星座后页面卡死BUG 修复
前端·vue.js·bug
前端小巷子2 小时前
JS 实现图片瀑布流布局
前端·javascript·面试
杜蒙2 小时前
React Hooks 详解
前端·javascript
小菜全3 小时前
Vue 3 + TypeScript 事件触发与数据绑定方法
前端·javascript·vue.js
Hilaku3 小时前
面试官开始问我AI了,前端的危机真的来了吗?
前端·javascript·面试
zheshiyangyang3 小时前
TypeScript学习【一】
javascript·学习·typescript
β添砖java4 小时前
案例二:登高千古第一绝句
前端·javascript·css