需求:鼠标滑过某行,当前行的图标变化
效果:
鼠标滑过某行后
P.s.:深拷贝这块内容有待完善
<el-table ref="table" class="table" :data="tableData" border :height="tableHeight"
:header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" stripe @cell-mouse-enter="cellMouseEnter" @cell-mouse-leave="cellMouseLeave">
<el-table-column prop="NO" type="index" label="序号" width="50">
<template slot-scope="scope">
<span>{{(page.currentPage - 1) * page.pageSize + scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column prop="name" label="名称">
<template slot-scope="scope">
<u @click="modify(scope.row)" style="cursor:pointer">{{scope.row.name}}</u>
</template>
</el-table-column>
<el-table-column prop="1" label="1"></el-table-column>
<el-table-column prop="2" label="2"></el-table-column>
<el-table-column prop="3" label="3"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<img :src="delSelectedImg" title="删除" class="delBtn" @click="delete(scope.row)" v-if="scope.row.hoverFlag"/>
<img :src="delImg" title="删除" class="delBtn" v-else/>
</template>
</el-table-column>
</el-table>
cellMouseEnter(row){
// console.log(row, event)
// 注意必须是使用两次深拷贝,因为 hoverFlag 属性不是tableData原有的,直接修改无效,所以两次深拷贝重新赋值
let Arr = JSON.parse(JSON.stringify(this.tableData))
for (let index = 0; index < Arr.length; index++) {
const element = Arr[index]
console.log('element', element)
// 匹配滑过的当前行
if (element.id === row.id) {
element['hoverFlag'] = true
} else {
element['hoverFlag'] = false
}
}
this.tableData = JSON.parse(JSON.stringify(Arr))
},
// 鼠标移出取消hover效果
cellMouseLeave(){
for (let index = 0; index < this.tableData.length; index++) {
const element = this.tableData[index]
element['hoverFlag'] = false
}
}
参考文章:el-table点击某行高亮;el-table设置hover效果;监听el-table点击某行变色;去除el-table的hover效果;监听el-table的hover事件