element-plus，el-table，每一行鼠标悬浮的时候，颜色如何自定义

Question

element-plus，el-table，每一行鼠标悬浮的时候，颜色如何自定义

Answer 1

引自免费微信小程序：皆我百晓生

在Element-Plus中，可以通过CSS样式来自定义el-table中行在鼠标悬停时的颜色。首先，在你的项目中找到对应的CSS文件（例如：app.css 或者 main.css），然后添加以下CSS规则：

/* 为表格中的所有行添加hover效果 */
.el-table__row:hover {
  background-color: /* 自定义颜色 */ ;
}

/* 如果你想针对特定列进行颜色设置，可以这样写 */
.el-table__row:hover .el-table__cell:nth-child(n) {
  background-color: /* 自定义颜色 */ ;
}

这里，你需要将/* 自定义颜色 */替换为你想要的颜色值，可以是十六进制、RGB、RGBA等形式的颜色表示。如果你想针对特定列设置颜色，只需更改.el-table__cell:nth-child(n)中的n为对应列的索引（从1开始）。

如果你希望动态地根据数据决定颜色，那么可能需要借助Vue的绑定语法（v-bind或简写为:v-）以及JavaScript表达式。首先，确保你的表格数据中有一个字段用于存储颜色信息，然后在HTML模板中应用这个颜色。

假设你的数据结构如下：

data() {
  return {
    tableData: [
      { id: 1, name: 'Item 1', hoverColor: '#f0f0f0' },
      { id: 2, name: 'Item 2', hoverColor: '#e0e0e0' },
      // 更多数据...
    ],
  };
},

接下来，修改你的el-table部分，如下所示：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="Name"></el-table-column>
    <!-- 其他列... -->

    <!-- 添加一个隐藏列来传递颜色 -->
    <el-table-column style="display: none">
      <template slot-scope="{ row }">
        <style scoped>
          .hover-row--{{ row.id }}::before {
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: -1;
            background-color: {{ row.hoverColor }};
          }
        </style>
        <div class="hover-row--{{ row.id }}"></div>
      </template>
    </el-table-column>
  </el-table>
</template>

这段代码会在每个表格行下方创建一个透明层，并根据数据中的颜色设置背景色。通过这种方式，当鼠标悬停在行上时，会显示相应的颜色。

注意，这种方法可能会导致一些性能影响，因为每个行都会添加额外的DOM元素。如果数据量很大，可能需要寻找其他方法实现相同的效果。