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

最新推荐文章于 2024-05-11 08:56:49 发布

小政爱学习！

最新推荐文章于 2024-05-11 08:56:49 发布

阅读量879

点赞数 8

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_58361435/article/details/135594084

版权

本文介绍了如何在Vue.js应用中使用ElementUI的el-table组件实现表格行的点击事件触发和行样式动态切换，包括`row-click`和`row-class-name`属性的应用以及CSS样式覆盖。

摘要由CSDN通过智能技术生成

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】

给每一行滑过加高亮：

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

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