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

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

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

重点解释：

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

在这里插入图片描述

代码可直接复制

<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'] = trueconsole.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>