antd table 表格背景颜色处理

表格:

<template>
  <div class="home">
      <div>
          <div ref="load" ></div>
          <a-table
              rowKey="id"
              size="middle"
              ref="scrollItemBox"
              :columns="tableColumns"
              class="inner-table tableColor scrollItemBox"
              :scroll="tableScroll"
              :data-source="loadingList"
              :pagination="false">
              <div slot="enterpriseName" slot-scope="data" style="white-space: pre-wrap;color: #46cbb3;font-size: 24px">
                  <template v-if="data">
                      <div>  {{data}} </div>
                  </template>
                  <template v-else>暂无数据</template>
              </div>
              <div slot="nameTheMaterial" slot-scope="data" style="white-space: pre-wrap;color: #46cbb3;font-size: 24px">
                  <template v-if="data">
                      {{data}}
                  </template>
                  <template v-else>暂无数据</template>
              </div>
              <div slot="callQueue" slot-scope="data" style="white-space: pre-wrap;color: #ffffff;font-size: 24px">
                  <template v-if="data">
                      {{data}}
                  </template>
                  <template v-else>暂无数据</template>
              </div>
              <div slot="current" slot-scope="data" style="white-space: pre-wrap;color: #ffffff;font-size: 24px">
                  <template v-if="data">
                      {{data}}
                  </template>
                  <template v-else>暂无数据</template>
              </div>
          </a-table>
      </div>
  </div>
</template>

假数据：

import {tableColumns} from "@/views/Home/config/config";

export default {
  name: 'HomeView',
    data(){
      return{
          tableColumns,
          tableScroll: {  y: undefined },
          loadingList:[]
      }
    },
    created() {
        // 假数据
        this.loadingList= [{
            enterpriseName:'测试',
            nameTheMaterial:"物料",
            callQueue:"呼叫",
            current:"排队"
        },{
            enterpriseName:'测试',
            nameTheMaterial:"物料",
            callQueue:"呼叫",
            current:"排队"
        },{
            enterpriseName:'测试',
            nameTheMaterial:"物料",
            callQueue:"呼叫",
            current:"排队"
        },{
            enterpriseName:'测试',
            nameTheMaterial:"物料",
            callQueue:"呼叫",
            current:"排队"
        },{
            enterpriseName:'测试',
            nameTheMaterial:"物料",
            callQueue:"呼叫",
            current:"排队"
        },{
            enterpriseName:'测试',
            nameTheMaterial:"物料",
            callQueue:"呼叫",
            current:"排队"
        },{
            enterpriseName:'测试',
            nameTheMaterial:"物料",
            callQueue:"呼叫",
            current:"排队"
        },{
            enterpriseName:'测试',
            nameTheMaterial:"物料",
            callQueue:"呼叫",
            current:"排队"
        }];
    },
    mounted() {
        this.calcScrollHeight();
    },
    methods: {
        calcScrollHeight() {
            const { top } = this.$refs.load.getBoundingClientRect();
            this.tableScroll.y = window.innerHeight - top - 105;
        },
    },

}
</script>           

样式

<style>
/*修改表格的样式*/
@import "@/views/Home/styles/common.css";
</style>
<style scoped>
/*背景图*/
.home{
    width: 100vw;
    height: 100vh;
    background-size: 100% !important;
    background: url("@/assets/12312313.png") no-repeat;
    padding-right: 40px;
    padding-left: 40px;
}
.tableColor{
    margin: 0 auto;
    padding-top: 50px;
}
</style>

common.css

/*表格头部样式*/
.tableColor .ant-table-header .ant-table-thead * {
    color:  #bfceff !important;
    font-size: 24px !important;
    background-color: rgba(28, 41, 79,0.5) !important;
}

/*隐藏头部滚动条*/
.tableColor  .ant-table-fixed-header .ant-table-scroll .ant-table-header {
    overflow: hidden !important;
    margin-bottom: 0 !important;
    background-color: transparent !important;
}

/*隐藏内容区域滚动条*/
.tableColor .ant-table-body::-webkit-scrollbar {
    width:0;
    height:0;
    overflow-y: auto;
}

/*表格头部区域添加里边框*/
.tableColor .ant-table-tbody > tr > td{
    border-bottom: 1px solid #334474 !important;
    border-right: 3px solid #2b3e71 !important;
    transition: background 0.3s;
}
/*表格内容区域添加里边框*/
.tableColor .ant-table-thead > tr > th{
    background-color: transparent !important;
    border-bottom: 1px solid #334474 !important;
    border-right: 3px solid #2b3e71 !important;
    color: #bfceff !important;
}

/*内容区域背景颜色为透明色*/
.tableColor  .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body{
    background-color: transparent !important;
}

/*双数行背景颜色为半透明*/
.tableColor .ant-table-tbody tr:nth-child(2n)
{
    background-color: rgba(28, 41, 79,0.5) !important;
}

/*覆盖原本的鼠标悬浮样式*/
.tableColor .ant-table-tbody:hover tr:nth-child(1n) *{
    background-color: transparent !important;
}
/*覆盖原本的鼠标悬浮样式*/
.tableColor .ant-table-tbody:hover  tr:nth-child(2n) *{
    background-color: transparent !important;
}


/*表格外边框样式设置*/
.tableColor .ant-table{
    border: 2px solid #2b3e71 !important;
}

/*表格数据源无数据时样式*/
.tableColor .ant-table .ant-table-scroll .ant-table-placeholder{
    background-color: transparent !important;
    border-top: 1px solid #2b3e71 !important;
    border-bottom: 0 solid #2b3e71 !important;
}