轻松一招解决el-table悬浮样式的问题

2022-11-12 00:12:36

重设el-table行悬浮样式，打造优雅数据展示界面

在Vue.js的开发中，el-table组件可谓是展示数据信息的利器。然而，有时你可能会发现el-table的行悬浮样式与项目的设计理念不符，或者与其他元素冲突，导致视觉效果不尽如人意。不要担心，本文将深入探讨重置el-table行悬浮样式的全方位解决方案，助你打造更加美观和专业的项目界面。

出现问题的原因

el-table默认的悬浮样式不符合项目的设计风格
el-table的悬浮样式与其他元素冲突，造成视觉混乱

解决方案

1. 使用CSS覆盖默认样式

.el-table tr:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
}

通过CSS覆盖，你可以直接修改el-table行悬浮时的背景颜色和字体颜色，使之与你的项目设计风格相匹配。

2. 使用JavaScript重置样式

const table = document.querySelector('.el-table');

table.addEventListener('mouseenter', () => {
  table.querySelectorAll('tr').forEach((row) => {
    row.classList.remove('el-table--hover');
  });
});

使用JavaScript，你可以重置el-table行悬浮时添加的默认class，从而消除默认的悬浮样式。

3. 使用Vue指令重置样式

<template>
  <el-table ref="table">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
  </el-table>
</template>

<script>
export default {
  mounted() {
    this.$refs.table.$el.addEventListener('mouseenter', () => {
      this.$refs.table.$el.querySelectorAll('tr').forEach((row) => {
        row.classList.remove('el-table--hover');
      });
    });
  },
};
</script>