Vuejs - vue3-easy-data-table

Question

我正在使用 vuejs 开发一个使用“vue3-easy-data-table”的项目，我遵循此页面上的样式建议。

https://hc200ok.github.io/vue3-easy-data-table-doc/features/style-customization.html

当我尝试使用时

--easy-table-body-even-row-font-color: #fff; --easy-table-body-even-row-background-color: #4c5d7a;

不需要改变偶数行的背景颜色。即使我添加 !important 也没有什么区别，如果您单击使用代码沙盒进行编辑，它也不起作用。

知道如何让它为偶数行显示不同的颜色，就像示例中那样。

Answer 1

您应该检查是否将

table-class-name

和

alternating

属性设置为自定义样式。

就像示例中的代码一样：

<EasyDataTable
  theme-color="#1d90ff"
  table-class-name="customize-table" // important
  header-text-direction="center"
  body-text-direction="center"
  alternating // important
/>

.customize-table {
  --easy-table-body-even-row-font-color: #fff;
  --easy-table-body-even-row-background-color: #4c5d7a;
}

Answer 2

确保遵循有关使用 --easy-table-body-even-... CSS 属性的

docs

，其中指出：

不要忘记与交替功能一起使用

<EasyDataTable
    :headers="headers"
    :items="items"
    table-class-name="customize-table"
    alternating
/>

.customize-table {
  --easy-table-body-even-row-font-color: #fff;
  --easy-table-body-even-row-background-color: #4c5d7a;
}

Answer 3

自从我添加

import 'vue3-easy-data-table/dist/style.css';

以来，它对我有用。

完整代码：

<script setup lang="ts">
import EasyDataTable, { Header } from "vue3-easy-data-table";
import "vue3-easy-data-table/dist/style.css";
//...
</script>

<template>
  <ClientOnly>
    <EasyDataTable
      theme-color="#1d90ff"
      table-class-name="customize-table"
      header-text-direction="center"
      body-text-direction="center"
      alternating
      :headers="headers"
      :items="taskStore.tasks"
    >

    </EasyDataTable>
  </ClientOnly>
</template>

<style>
.customize-table {
  --easy-table-border: 1px solid #445269;
  --easy-table-row-border: 1px solid #445269;

  --easy-table-header-font-size: 14px;
  --easy-table-header-height: 50px;
  --easy-table-header-font-color: #c1cad4;
  --easy-table-header-background-color: #2d3a4f;

  --easy-table-header-item-padding: 10px 15px;

  --easy-table-body-even-row-font-color: #fff;
  --easy-table-body-even-row-background-color: #4c5d7a;

  --easy-table-body-row-font-color: #c0c7d2;
  --easy-table-body-row-background-color: #2d3a4f;
  --easy-table-body-row-height: 50px;
  --easy-table-body-row-font-size: 14px;

  --easy-table-body-row-hover-font-color: #2d3a4f;
  --easy-table-body-row-hover-background-color: #eee;

  --easy-table-body-item-padding: 10px 15px;

  --easy-table-footer-background-color: #2d3a4f;
  --easy-table-footer-font-color: #c0c7d2;
  --easy-table-footer-font-size: 14px;
  --easy-table-footer-padding: 0px 10px;
  --easy-table-footer-height: 50px;

  --easy-table-rows-per-page-selector-width: 70px;
  --easy-table-rows-per-page-selector-option-padding: 10px;
  --easy-table-rows-per-page-selector-z-index: 1;

  --easy-table-scrollbar-track-color: #2d3a4f;
  --easy-table-scrollbar-color: #2d3a4f;
  --easy-table-scrollbar-thumb-color: #4c5d7a;
  --easy-table-scrollbar-corner-color: #2d3a4f;

  --easy-table-loading-mask-background-color: #2d3a4f;
}
</style>