el-table 鼠标悬停时表格行的背景颜色有效与无效修改

在Element UI中，可以通过CSS覆盖默认的样式来修改鼠标悬停时的背景色。以下是一个示例，展示了如何为el-table设置鼠标悬停时的背景色。

首先，确保你已经在项目中引入了Element UI，并且你的组件正在使用Element UI的样式。

然后，在你的Vue组件的<style>标签中或者外部CSS文件中，添加以下CSS规则来覆盖默认的样式：

/* 当鼠标悬停在表格的行上时，改变背景色 */
.el-table .el-table__row:hover {
  background-color: #f0f9eb; /* 修改为你想要的颜色 */
}
 
/* 若要为表格的某一特定状态行设置不同的颜色，可以添加额外的类或ID来指定 */
.el-table .el-table__row.disabled:hover {
  background-color: #ffffff; /* 设置为无效的颜色 */
}
 
.el-table .el-table__row.valid:hover {
  background-color: #f0f9eb; /* 设置为有效的颜色 */
}

在你的Vue模板中，确保你的el-table元素中的行有disabled或valid类来标识其状态：

<el-table :data="tableData">
  <!-- 表格列定义 -->
  <el-table-column prop="date" label="日期" width="180"></el-table-column>
  <!-- 更多列 -->
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button
        :class="{ valid: scope.row.isValid, disabled: !scope.row.isValid }"
        size="small">
        按钮
      </el-button>
    </template>
  </el-table-column>
</el-table>

在这个例子中，scope.row.isValid是用来判断行数据状态的字段，根据其值动态绑定valid或disabled类到行元素上。

请注意，这些CSS类和属性名称可能需要根据你的实际数据结构和Element UI版本进行调整。