el-table 鼠标滑入改变背景颜色

可以通过 el-table 的 slot-scope 属性来实现鼠标滑入改变背景颜色的效果。

首先，在 el-table 中添加一个 slot，用来渲染单元格的内容，并绑定 slot-scope 属性。

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名">
    <template slot-scope="{ row }">
      <div class="cell" :class="{ 'active': row.active }" @mouseenter="row.active = true" @mouseleave="row.active = false">{{ row.name }}</div>
    </template>
  </el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

在 slot 中，用 div 标签包裹单元格的内容，并绑定 @mouseenter 和 @mouseleave 事件，触发时设置 row 对象的 active 属性为 true 或 false。
在 div 标签上，使用 :class 绑定一个名为 active 的类名，当 row 对象的 active 属性为 true 时，该类名生效，从而改变单元格的背景颜色。
最后，在样式表中定义 active 类的样式，用来改变单元格的背景颜色。

.cell.active {
  background-color: #f5f5f5;
}