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;
}
相关推荐
coding随想34 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
DanB242 小时前
html复习
javascript·microsoft·html
呼啦啦呼啦啦啦啦啦啦8 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
前端 贾公子10 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录11 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图20911 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode11 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
koooo~11 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript