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

小政爱学习！2024-01-18 16:56

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;
}