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中