element-ui table组件中Table Events使用

页面效果

鼠标hover时显示当前行下可编辑的元素

table组件设置hover时背景颜色

一、直接修改css样式

.el-table .el-table__body tr:hover td {
    background-color: orange;
}

二、配合cell-mouse-enter cell-mouse-leave使用

handleMouseEnter(row, column, cell, event) {
  cell.classList.add(style)
}

Table Events 使用说明

实现

methods中

methods：{
 cellmouseenter(row, column, cell, event){
    console.log(row, column, cell, event)
   	this.templateRow = row.id; //存在相同的名字，加id区别
    this.templateName = row.pname;
    this.templateLocation = row.location.area;

    },
}

html中