elementui中鼠标移动使得表格背景变色，代码示例

在Element UI中，如果你想实现在表格行上鼠标悬停时改变背景颜色，你可以利用Element提供的表格组件（`el-table`）以及自定义事件监听功能。下面是一个简单的代码示例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <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-column type="index" label="操作">
      <template slot-scope="scope">
        <span @mouseenter="hoverRow(scope.$index)" @mouseleave="resetHover"></span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎', address: '上海市松江区开翔路968号' },
        // ... 其他数据
      ],
    };
  },
  methods: {
    hoverRow(index) {
      this.tableData[index].isHovered = true;
    },
    resetHover() {
      for (let i = 0; i < this.tableData.length; i++) {
        this.tableData[i].isHovered = false;
      }
    },
  },
};
</script>

<style scoped>
.el-table tr:hover {
  background-color: #f5f5f5; /* 想要的悬停背景颜色 */
}

.is-hovered {
  background-color: lightblue; /* 当前被悬停行的颜色 */
}
</style>

在这个例子中，我们创建了一个自定义列，当鼠标悬停在每一行时，通过`@mouseenter`触发`hoverRow`方法，将当前行的`isHovered`属性设为`true`。而`resetHover`方法则用于移除所有行的`isHovered`状态。

然后我们在CSS部分设置了默认的非悬停状态（`tr`）以及悬停状态（`.is-hovered`）的背景颜色。