el-table点击每一行加背景颜色-Toy模板网

这篇具有很好参考价值的文章主要介绍了el-table点击每一行加背景颜色。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

<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

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

总结：

相当于是没次点击给它加个class类名，用到的是el-table的属性名【row-class-name】，然后还有每一行的点击事件【row-click】文章来源地址https://www.toymoban.com/news/detail-804768.html

给每一行滑过加高亮：

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

// 鼠标滑入每一行取消高亮
::v-deep .el-table__body tr:hover>td {
  background-color: transparent;
}

到了这里，关于el-table点击每一行加背景颜色的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！