修改

src/views/anomaly/index.vue

@@ -51,6 +51,7 @@
                 </el-button>
             </template>
             <hc-table 
+                class="anonaly-page-table"
                 :column="tableColumn"
                 :datas="tableData" 
                 :cell-style="tableCellStyle"
@@ -172,7 +173,23 @@ const exportClick = (row)=>{
 </style>
 
 <style>
-.anonaly-page .el-table {
-   color:black
+.anonaly-page-table .el-table[hc].new {
+    --el-table-header-bg-color: #101010;
+    --el-table-header-text-color: #fff;
+    --el-table-text-color: #101010;
+    thead.is-group th.el-table__cell {
+        background: var(--el-table-header-bg-color);
+    }
+    thead .el-table-fixed-column--left.el-table__cell,
+    thead .el-table-fixed-column--right.el-table__cell {
+        background: var(--el-table-header-bg-color) !important;
+    }
+    tbody .el-table-fixed-column--left.el-table__cell,
+    tbody .el-table-fixed-column--right.el-table__cell {
+        background: var(--el-table-tr-bg-color) !important;
+    }
+    .el-table__body tr.current-row>td.el-table__cell {
+        background-color: var(--el-table-current-row-bg-color) !important;
+    }
 }
 </style>

src/views/system/menu.vue

@@ -24,7 +24,7 @@
                 ui="no-border" has-children="hasChildren1" :is-index="true"   
                 :column="tableColumn" :datas="tableData"
                 :index-style="{ fixed: true, width: 60 }" is-check border :check-style="{ fixed: true, width: 29 }"
-             
+                class="menu-page-table"
                 @selection-change="tableSelectionChange"
             >
                 <template #name="{ row }">
@@ -219,7 +219,23 @@ const menuDataModalClose = ()=>{
 </style>
 
 <style>
-.menu-page .el-table {
-   color:black
+.menu-page-table .el-table[hc].new {
+    --el-table-header-bg-color: #101010;
+    --el-table-header-text-color: #fff;
+    --el-table-text-color: #101010;
+    thead.is-group th.el-table__cell {
+        background: var(--el-table-header-bg-color);
+    }
+    thead .el-table-fixed-column--left.el-table__cell,
+    thead .el-table-fixed-column--right.el-table__cell {
+        background: var(--el-table-header-bg-color) !important;
+    }
+    tbody .el-table-fixed-column--left.el-table__cell,
+    tbody .el-table-fixed-column--right.el-table__cell {
+        background: var(--el-table-tr-bg-color) !important;
+    }
+    .el-table__body tr.current-row>td.el-table__cell {
+        background-color: var(--el-table-current-row-bg-color) !important;
+    }
 }
 </style>

src/views/system/role.vue

@@ -14,6 +14,7 @@
                 </el-button>
             </template>
             <hc-table 
+                class="role-page-table"
                 is-check
                 :column="tableColumn"
                 :datas="tableData" 
@@ -22,7 +23,7 @@
             >
                 <template #action="{ row }">
                     <el-link type="success" @click="rowEditClick(row)">   <hc-icon name="edit" />编辑</el-link>
-                    <el-link type="danger" @click="rowDelClick(row)">  <hc-icon name="delete-bin-2" />删除</el-link>
+                    <el-link type="success" @click="rowDelClick(row)">  <hc-icon name="delete-bin-2" />删除</el-link>
                 </template>
             </hc-table>
             <template #action>
@@ -70,11 +71,7 @@
        { key1: 'admin', key2: 'xxx', key3: '超级管理员' },
        { key1: '13028304756', key2: 'aaa', key3: '角色' },
    ])
-   //设置表头行的样式
-   const tableHeaderRowStyle = ({ row, rowIndex }) => {
-       // --el-table-header-bg-color 是表格,表头行的背景色
-       return '--el-table-header-bg-color: #4b4b4b;  color: white;'
-   }
+
    const addModal = ref(false)
    const addClick = ()=>{
        addModal.value = true
@@ -211,7 +208,23 @@ const data = [
 </style>
 
 <style>
-.role-page .el-table {
-   color:black
+.role-page-table .el-table[hc].new {
+    --el-table-header-bg-color: #101010;
+    --el-table-header-text-color: #fff;
+    --el-table-text-color: #101010;
+    thead.is-group th.el-table__cell {
+        background: var(--el-table-header-bg-color);
+    }
+    thead .el-table-fixed-column--left.el-table__cell,
+    thead .el-table-fixed-column--right.el-table__cell {
+        background: var(--el-table-header-bg-color) !important;
+    }
+    tbody .el-table-fixed-column--left.el-table__cell,
+    tbody .el-table-fixed-column--right.el-table__cell {
+        background: var(--el-table-tr-bg-color) !important;
+    }
+    .el-table__body tr.current-row>td.el-table__cell {
+        background-color: var(--el-table-current-row-bg-color) !important;
+    }
 }
 </style>

src/views/system/user.vue

@@ -29,6 +29,7 @@
                 </el-button>
             </template>
             <hc-table 
+                class="user-page-table"
                 is-check
                 :column="tableColumn"
                 :datas="tableData" 
@@ -37,7 +38,7 @@
             >
                 <template #action="{ row }">
                     <el-link type="success" @click="rowEditClick(row)">   <hc-icon name="edit" />编辑</el-link>
-                    <el-link type="danger" @click="rowDelClick(row)">  <hc-icon name="delete-bin-2" />删除</el-link>
+                    <el-link type="success" @click="rowDelClick(row)">  <hc-icon name="delete-bin-2" />删除</el-link>
                 </template>
             </hc-table>
             <template #action>
@@ -193,8 +194,25 @@ const roleOptions = ref([ {
 }
 </style>
 
-<style>
-.user-page .el-table {
-   color:black
+
+<style lang="scss">
+.user-page-table .el-table[hc].new {
+    --el-table-header-bg-color: #101010;
+    --el-table-header-text-color: #fff;
+    --el-table-text-color: #101010;
+    thead.is-group th.el-table__cell {
+        background: var(--el-table-header-bg-color);
+    }
+    thead .el-table-fixed-column--left.el-table__cell,
+    thead .el-table-fixed-column--right.el-table__cell {
+        background: var(--el-table-header-bg-color) !important;
+    }
+    tbody .el-table-fixed-column--left.el-table__cell,
+    tbody .el-table-fixed-column--right.el-table__cell {
+        background: var(--el-table-tr-bg-color) !important;
+    }
+    .el-table__body tr.current-row>td.el-table__cell {
+        background-color: var(--el-table-current-row-bg-color) !important;
+    }
 }
-</style>
+</style>