el-table点击某行高亮；el-table设置hover效果；监听el-table点击某行变色；去除el-table的hover效果；监听el-table的hover事件_el-table高亮和滑动事件

以下代码可直接复制使用 无需任何修改

注意：如果最后的的css不生效，就单独的放在一个style标签内

重点解释：

:row-class-name="tableRowClassName"   //这个是设置返回某行的类名
:stripe="false"                       //这个是去除原来的斑马条纹 否则自己设置的行样式不生效
@row-click="rowClick"                 //这个是点击某行事件
@cell-mouse-enter="cellMouseEnter"    //这个是移入某行事件
@cell-mouse-leave="cellMouseLeave"    //这个是移出某行事件
1
2
3
4
5

代码可直接复制

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" :stripe="false" @row-click="rowClick" @cell-mouse-enter="cellMouseEnter" @cell-mouse-leave="cellMouseLeave">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
          <!-- {{ scope.row }} -->
          <span v-if="scope.row.hoverFlag"> hover显示 </span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎1',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎2',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎3',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎4',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      rowIndex: -1
    }
  },
  watch: {
    tableData: {
      deep: true,
      handler: function (value) {
        console.log('监听表格数据', value)
      }
    }
  },
  methods: {
    rowClick (row, column, event) {
      // console.log('点击行事件', row, column, event)

      // 注意必须是使用两次深拷贝 因为 selectFlag 属性不是tableData原有的 则直接修改无效  所以两次深拷贝重新赋值
      let Arr = JSON.parse(JSON.stringify(this.tableData))
      for (let index = 0; index < Arr.length; index++) {
        const element = Arr[index]
        if (element.id == row.id) {
          element['selectFlag'] = true
          console.log('找到对应行')
        } else {
          element['selectFlag'] = false
        }
      }
      this.tableData = JSON.parse(JSON.stringify(Arr))
    },
    cellMouseEnter (row, column, cell, event) {
      // console.log('移入hover事件', row, column, cell, event)

      // 注意必须是使用两次深拷贝 因为 hoverFlag 属性不是tableData原有的 则直接修改无效  所以两次深拷贝重新赋值
      let Arr = JSON.parse(JSON.stringify(this.tableData))
      for (let index = 0; index < Arr.length; index++) {
        const element = Arr[index]
        if (element.id == row.id) {
          console.log('找到对应行')
          element['hoverFlag'] = true
        } else {
          element['hoverFlag'] = false
        }
      }
      this.tableData = JSON.parse(JSON.stringify(Arr))
    },
    cellMouseLeave () {
      // 移除hover的事件
      for (let index = 0; index < this.tableData.length; index++) {
        const element = this.tableData[index]
        element['hoverFlag'] = false
      }
    },
    tableRowClassName ({ row, rowIndex }) {
      // 行的 className 的回调方法，为 Table 中的某一行添加 class，表明该行处于某种状态。
      console.log('表格行数据变化事件', row, rowIndex)
      if (row.selectFlag) {
        return 'success-row'
      } else {
        return ''
      }
    }
  }
}
</script>



<style>
  /* 首先去除默认的hover效果 */
  /deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: rgba(0, 0, 0, 0) !important;
  }

  /* 设置点击行的效果 */
  /deep/.el-table .success-row {
    background: #f0f9eb;
    /* background: #f5f7fa; */
  }
  /deep/.el-table .success-yellow {
    background: #eef7b5;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124