在vue中需要修改el-table表格中每一行el-table-column背景色，还有table表格中数据太多，看起来臃肿，需要margin调整上下边距，直接使用margin不生效，是因为display使用的是table属性，所以我们要利用table特性来进行处理。

效果：

.el-table {
  width: 100%;
  margin-bottom: 20px;
  &::before {
    display: none;
  }
  .el-table__body {
    /* //-webkit-border-horizontal-spacing: 13px;  // 水平间距 */
    /*  // 垂直间距 设置的是行间距 */
    -webkit-border-vertical-spacing: 10px;
  }
  thead th {
    font-size: 14px;
    color: #575757;
    &:nth-last-child(2) {
      border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
      border-radius: 0 5px 5px 0;
      right: 1px;
    }
  }
  thead th,
  .el-table__row td {
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    padding: 10px 0;
    &:first-child {

      border-radius: 5px 0 0 5px;
    }
  }
  .el-table__row > td {
    font-size: 12px;
    color: #333333;
    &:last-child {
      border-radius: 0 5px 5px 0;
    }
  }
  .el-table__body tr:hover > td.el-table__cell {
    background-color: rgba(0, 110, 255, 0.05);
  }
  .el-table__fixed::before {
    display: none;
  }
}

修改el-table表头和el-table-column每一行的背景色：

全部代码：

<template>
  <div class="container1">
    <div class="button-group">
      <el-button class="custom-button">档案总数</el-button>
      <el-button class="custom-button">累计借出数量</el-button>
      <el-button class="custom-button">当前在库</el-button>
      <el-button class="custom-button">当前借出数量</el-button>
    </div>

    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :header-cell-style="{
        background: '#03050c',
        color: '#ffffff',
        border: '#03050c',
      }"
      :cell-style="{
        background: 'rgba(45, 67, 115,0.9)',

        border: '#03050c',
        color: '#EAEFFF',
      }"
      :row-class-name="{
        background: '#2D4373',
        border: '#03050c',
        margin: '0px',
        color: '#EAEFFF',
      }"
    >
      <el-table-column prop="index" label="序号" width="60"></el-table-column>
      <el-table-column prop="name" label="工具具名称"></el-table-column>
      <el-table-column prop="type" label="工具具类型"></el-table-column>
      <el-table-column prop="status" label="工具具状态"></el-table-column>
      <el-table-column prop="entryTime" label="入库时间"></el-table-column>
      <el-table-column prop="inspectTime" label="检验时间"></el-table-column>
      <el-table-column
        prop="nextInspectTime"
        label="下次检验时间"
      ></el-table-column>
      <el-table-column prop="inStock" label="是否在库"></el-table-column>
      <el-table-column prop="borrower" label="借用人"></el-table-column>
      <el-table-column prop="borrowTime" label="借用时间"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { SeamlessScroll } from "vue-seamless-scroll";
export default {
  name: "CkDilog",
  components: {
    SeamlessScroll,
  },
  // props: {
  //   tableData: {
  //     type: Array,
  //     required: true,
  //   },
  // },
  data() {
    return {
      testArray: [], // 初始化为空数组
    };
  },

  methods: {
    fetchData(states) {
      listBoardtools({ states })
        .then((response) => {
          if (response && response.total) {
            this.testArray = response.rows;
          }
        })
        .catch((error) => {
          console.error("Error fetching data with states:", states, error);
        });
    },
    classOption: {
      singleHeight: 30,
    },
  },
};
</script>

<style scoped>
.container1 {
  /* background-color: #122909; */
  height: 80vh;
  padding: 10px;
  color: white;
  position: relative;
  /*background-color: gainsboro;*/
  overflow: hidden;
}

.button-group {
  display: flex;
  justify-content: center;
}

.custom-button {
  border-radius: 0;
  background-color: #1c4a6e;
  font-weight: 500;
  font-size: 16px;
  color: #28a0d9;
  line-height: 20px;
  text-shadow: 0px 0px 10px rgba(4, 59, 187, 0.88);
  border: none;
  padding: 6px 20px;
  background-image: url("~@/assets/images/WarehouseHomepage/Dlalogbt.png");
}

.custom-button:hover {
  background-color: #2d6186;
  color: white;
}

.el-table {
  border: 1px solid #0c1430;
  background-color: #000000;
}
.el-table::before,
.el-table--group::after,
.el-table--border::after {
  content: "";
  position: absolute;
  background-color: #060607;
  z-index: 1;
}
.el-table th {
  background-color: #163458 !important;
  color: white !important;
  border: 1px solid #03050c;
}

.el-table td {
  /* background-color: #0f2740 !important; */
  color: white !important;
  border: 1px solid #03050c;
}

.cell-space /deep/ .el-table .el-table__body-wrapper .el-table__body {
  border-collapse: separate;
  border-spacing: 5px;
}

.el-table {
  width: 100%;
  margin-bottom: 20px;
  &::before {
    display: none;
  }
  .el-table__body {
    /* //-webkit-border-horizontal-spacing: 13px;  // 水平间距 */
    /*  // 垂直间距 设置的是行间距 */
    -webkit-border-vertical-spacing: 10px;
  }
  thead th {
    font-size: 14px;
    color: #575757;
    &:nth-last-child(2) {
      border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
      border-radius: 0 5px 5px 0;
      right: 1px;
    }
  }
  thead th,
  .el-table__row td {
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    padding: 10px 0;
    &:first-child {
      border-radius: 5px 0 0 5px;
    }
  }
  .el-table__row > td {
    font-size: 12px;
    color: #333333;
    &:last-child {
      border-radius: 0 5px 5px 0;
    }
  }
  .el-table__body tr:hover > td.el-table__cell {
    background-color: rgba(0, 110, 255, 0.05);
  }
  .el-table__fixed::before {
    display: none;
  }
}
</style>