el-table 鼠标悬浮时背景色改变

**EL-Table 背景色变化效果**

在实际的开发中，我们经常会遇到需要根据鼠标悬浮状态改变表格背景色的需求。这种需求可以通过使用 EL-Table 组件来实现。在本文中，我们将展示如何利用 EL-Table 的自定义样式功能，实现鼠标悬浮时背景色改变的效果。

### 一、基本概念首先，我们需要了解 EL-Table 是一个基于 Vue.js 的表格组件，它提供了许多实用的功能，如数据绑定、排序、过滤等。我们可以通过自定义样式来实现鼠标悬浮时背景色改变的效果。

### 二、准备工作在开始编码之前，我们需要准备好以下几点：

* 安装 EL-Table 组件：`npm install element-ui`
* 引入 EL-Table 样式文件：`import 'element-ui/lib/theme-chalk/index.css';`

### 三、实现鼠标悬浮时背景色改变下面是具体的代码示例和注释：

html<template>
 <div>
 <el-table :data="tableData" style="width:100%" @cell-mouse-enter="handleMouseEnter" @cell-mouse-leave="handleMouseLeave">
 <!-- 表格内容 -->
 <el-table-column prop="date" label="日期"></el-table-column>
 <el-table-column prop="name" label="姓名"></el-table-column>
 <el-table-column prop="address" label="地址"></el-table-column>
 </el-table>
 </div>
</template>

<script>
export default {
 data() {
 return {
 tableData: [
 {
 date: '2016-05-03',
 name: 'John Brown',
 address: 'New York No.1 Lake Park'
 },
 {
 date: '2016-05-02',
 name: 'Jim Green',
 address: 'London No.1 Lake Park'
 }
 ]
 };
 },
 methods: {
 // 鼠标悬浮时背景色改变 handleMouseEnter({ row, column, cell }) {
 console.log(row, column, cell);
 this.$refs.elTable.doLayout();
 const tr = cell.parentNode;
 const td = cell;
 const rect = tr.getBoundingClientRect();
 const x = rect.left + (rect.width -200) /2; // 中间位置 const y = rect.top + (rect.height -40) /2; // 中间位置 this.$refs.elTable.$el.style.background = 'rgba(0,255,0,0.5)';
 },
 handleMouseLeave() {
 this.$refs.elTable.$el.style.background = '';
 }
 }
};
</script>