el-table 鼠标进入格子，column一整列变色

在Element UI的el-table组件中，如果你想实现鼠标悬停在表格某一格时，对应的整列颜色发生变化的效果，你可以通过自定义列模板并利用CSS样式来达成。首先，在列的render-header或render-cell中添加事件监听，当鼠标进入时改变背景色，离开则恢复原状。

这是一个简单的示例：

<template>
  <el-table :data="tableData">
    <el-table-column
      prop="name"
      label="姓名"
      header-cell-style="{ background-color: '#f5f5f5' }"   <!-- 初始化时设定一个默认背景色 -->
      cell-style="hover-row"                                  
    >
      {{ row.name }}
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 22 },
        // ...
      ]
    };
  },
  methods: {
    hoverRow(row, cellIndex) {
      this.$refs.table.toggleRowClassName({row, rowIndex: row.index}, 'custom-class-name');  // 当鼠标悬停时应用新类名
      // 当鼠标移开时移除该类名
      setTimeout(() => {
        this.$refs.table.clearRowClassName({row, rowIndex: row.index}, 'custom-class-name');
      }, 200); // 设置一定的延时，以便用户能明显感受到变化
    }
  }
};
</script>

<style scoped>
.custom-class-name {
  background-color: /* 想要的颜色，如：red */;
}
</style>

在这个例子中，我们创建了一个名为`custom-class-name`的类，并在`hoverRow`方法中动态添加和删除它。当鼠标进入时，表格行会变色；移开后，设置一个清除类名的定时器，确保颜色能在一定时间内恢复正常。