表格斑马线样式修改

src/components/examine.vue

@@ -10,14 +10,14 @@
       </div>
       <div class="examine_title2">
         <a @click="showApproved"
-          :style="{ color: isApproved ? 'black' : 'rgb(179, 179, 179)', fontWeight: 'bold' }">已通过({{ approvedData.length}})({{approvedData.length}})</a>
+          :style="{ color: isApproved ? 'black' : 'rgb(179, 179, 179)', fontWeight: 'bold' }">已通过({{approvedData.length}})</a>
       </div>
       <div class="examine_title3">
         <a @click="showRefused"
-          :style="{ color: isRefused ? 'black' : 'rgb(179, 179, 179)', fontWeight: 'bold' }">已拒绝({{ RefusedData.length}})({{RefusedData.length}})</a>
+          :style="{ color: isRefused ? 'black' : 'rgb(179, 179, 179)', fontWeight: 'bold' }">已拒绝({{RefusedData.length}})</a>
       </div>
       <div class="examine_title4">
-        <a @click="showAll" :style="{ color: isAll ? 'black' : 'rgb(179, 179, 179)', fontWeight: 'bold' }">全部记录({{ AllData.length}})({{AllData.length}})</a>
+        <a @click="showAll" :style="{ color: isAll ? 'black' : 'rgb(179, 179, 179)', fontWeight: 'bold' }">全部记录({{AllData.length}})</a>
       </div>
     </div>
 
@@ -33,27 +33,29 @@
 
       <!-- 待审核的数据 -->
       <div v-if="isPending">
-        <el-table :data="currentTableData" stripe border style="width: 100%; background-color: white;"
-          @selection-change="handleSelectionChange">
-          <el-table-column type="selection" width="50"></el-table-column>
-          <el-table-column prop="company" label="组织名称" width="400">
-            <template slot-scope="scope">{{ scope.row.company }}</template>
-          </el-table-column>
-          <el-table-column prop="phone" label="电话/邮箱" width="400"></el-table-column>
-          <el-table-column prop="name" label="姓名" width="400" show-overflow-tooltip
-            :label-class-name="'address-column'"></el-table-column>
-          <el-table-column prop="submission_time" label="提交时间" width="400"></el-table-column>
-          <el-table-column prop="remarks" label="备注" width="400"></el-table-column>
-          <el-table-column label="操作" width="283">
-            <template slot-scope="{ row }">
-              <button @click="ajax_move_to_approved(row.userid, row.companyNumber)"
-                style="color: #308fff; background: none; border: none; cursor: pointer; margin-left: 25px;">通过</button>
-              <button @click="ajax_move_to_rejected(row.userid, row.companyNumber)"
-                style="color: #308fff; background: none; border: none; cursor: pointer; margin-left: 35px;">拒绝</button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
+    <!-- 禁用 stripe 属性，完全自定义背景色 -->
+    <el-table :data="currentTableData" stripe border style="width: 100%; background-color: white;"
+      @selection-change="handleSelectionChange"  :header-cell-style="headerCellStyle">
+      
+      <el-table-column type="selection" width="50"></el-table-column>
+      <el-table-column prop="company" label="组织名称" width="450">
+        <template slot-scope="scope">{{ scope.row.company }}</template>
+      </el-table-column>
+      <el-table-column prop="phone" label="电话/邮箱" width="450"></el-table-column>
+      <el-table-column prop="name" label="姓名" width="450" show-overflow-tooltip
+        :label-class-name="'address-column'"></el-table-column>
+      <el-table-column prop="submission_time" label="提交时间" width="450"></el-table-column>
+      <el-table-column prop="remarks" label="备注" width="450"></el-table-column>
+      <el-table-column label="操作" width="310">
+        <template slot-scope="{ row }">
+          <button @click="ajax_move_to_approved(row.userid, row.companyNumber)"
+            style="color: #308fff; background: none; border: none; cursor: pointer; margin-left: 25px;">通过</button>
+          <button @click="ajax_move_to_rejected(row.userid, row.companyNumber)"
+            style="color: #308fff; background: none; border: none; cursor: pointer; margin-left: 35px;">拒绝</button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
       <!-- 分页组件 -->
       <el-pagination v-if="Pending_request" :current-page="currentPage" :page-size="pageSize"
         :page-sizes="pageSizeOptions" :total="tableData.length" @size-change="handlePageSizeChange"
@@ -63,18 +65,18 @@
       <!-- 已通过的数据 -->
       <div v-if="isApproved">
         <el-table :data="currentApprovedData" stripe border style="width: 100%; background-color: white;"
-          @selection-change="handleApprovedSelectionChange">
+          @selection-change="handleApprovedSelectionChange"  :header-cell-style="headerCellStyle">
           <el-table-column type="selection" width="50" />
-          <el-table-column prop="company" label="组织名称" width="350">
+          <el-table-column prop="company" label="组织名称" width="400">
             <template slot="default" slot-scope="scope">{{ scope.row.company }}</template>
           </el-table-column>
-          <el-table-column prop="phone" label="电话/邮箱" width="350" />
-          <el-table-column prop="name" label="姓名" width="350" show-overflow-tooltip
+          <el-table-column prop="phone" label="电话/邮箱" width="400" />
+          <el-table-column prop="name" label="姓名" width="400" show-overflow-tooltip
             :label-class-name="'address-column'" />
-          <el-table-column prop="submission_time" label="提交时间" width="331" />
-          <el-table-column prop="remarks" label="备注" width="300" />
+          <el-table-column prop="submission_time" label="提交时间" width="350" />
+          <el-table-column prop="remarks" label="备注" width="350" />
           <el-table-column prop="Pending_time" label="审核时间" width="300" />
-          <el-table-column prop="open_organization" label="开通组织" width="300">
+          <el-table-column prop="open_organization" label="开通组织" width="360">
             <template slot="default" slot-scope="scope">{{ scope.row.open_organization }}</template>
           </el-table-column>
         </el-table>
@@ -87,18 +89,18 @@
       <!-- 已拒绝的数据 -->
       <div v-if="isRefused">
         <el-table :data="currentRefusedData" stripe border style="width: 100%; background-color: white;"
-          @selection-change="handleRefusedSelectionChange">
+          @selection-change="handleRefusedSelectionChange"  :header-cell-style="headerCellStyle">
           <el-table-column type="selection" width="50" />
-          <el-table-column prop="company" label="组织名称" width="320">
+          <el-table-column prop="company" label="组织名称" width="400">
             <template slot="default" slot-scope="scope">{{ scope.row.company }}</template>
           </el-table-column>
-          <el-table-column prop="phone" label="电话/邮箱" width="330" />
+          <el-table-column prop="phone" label="电话/邮箱" width="400" />
           <el-table-column prop="name" label="姓名" width="350" show-overflow-tooltip
             :label-class-name="'address-column'" />
           <el-table-column prop="submission_time" label="提交时间" width="300" />
-          <el-table-column prop="remarks" label="备注" width="350" />
-          <el-table-column prop="Pending_time" label="审核时间" width="350" />
-          <el-table-column label="操作" width="283">
+          <el-table-column prop="remarks" label="备注" width="400" />
+          <el-table-column prop="Pending_time" label="审核时间" width="400" />
+          <el-table-column label="操作" width="310">
             <template slot-scope="{ row }">
               <button @click="ajax__move_to_pending_from_rejected(row.userid, row.companyNumber)"
                 style="color: #308fff; background: none; border: none; cursor: pointer; margin-left: 25px;">移动至待审核</button>
@@ -114,18 +116,18 @@
       <!-- 全部记录的数据 -->
       <div v-if="isAll">
         <el-table :data="currentAllData" stripe border style="width: 100%; background-color: white;"
-          @selection-change="handleAllSelectionChange">
+          @selection-change="handleAllSelectionChange"  :header-cell-style="headerCellStyle">
           <el-table-column type="selection" width="50" />
-          <el-table-column prop="company" label="组织名称" width="350">
+          <el-table-column prop="company" label="组织名称" width="400">
             <template slot="default" slot-scope="scope">{{ scope.row.company }}</template>
           </el-table-column>
-          <el-table-column prop="phone" label="电话/邮箱" width="350" />
+          <el-table-column prop="phone" label="电话/邮箱" width="400" />
           <el-table-column prop="name" label="姓名" width="350" show-overflow-tooltip
             :label-class-name="'address-column'" />
-          <el-table-column prop="submission_time" label="提交时间" width="300" />
+          <el-table-column prop="submission_time" label="提交时间" width="350" />
           <el-table-column prop="remarks" label="备注" width="350" />
-          <el-table-column prop="Pending_time" label="审核时间" width="300" />
-          <el-table-column label="操作" width="283" prop="status">
+          <el-table-column prop="Pending_time" label="审核时间" width="400" />
+          <el-table-column label="操作" width="310" prop="status">
             <template slot="default" slot-scope="scope">
           <!-- 根据状态值显示不同颜色的按钮 -->
           <el-button :type="getButtonType(scope.row.status)" :disabled="false" style="border-radius: 5px; padding: 4px 12px; font-size: 14px;">
@@ -180,7 +182,33 @@ export default {
       pageSize: 5, // 每页显示的条目数
       pageSizeOptions: [5, 10, 25, 50],  // 可选的页大小
       // 待审核数据
-      tableData: [],
+      tableData: [ {
+          company: "北京科技有限公司",
+          phone: "010-12345678",
+          name: "张三",
+          submission_time: "2024-12-20 10:00",
+          remarks: "暂无备注",
+          userid: 1,
+          companyNumber: "BJKJ001"
+        },
+        {
+          company: "上海创新企业",
+          phone: "021-87654321",
+          name: "李四",
+          submission_time: "2024-12-21 12:00",
+          remarks: "待审核",
+          userid: 2,
+          companyNumber: "SHCX002"
+        },
+        {
+          company: "广州实业集团",
+          phone: "020-23456789",
+          name: "王五",
+          submission_time: "2024-12-22 14:30",
+          remarks: "需要更多资料",
+          userid: 3,
+          companyNumber: "GZSY003"
+        }],
       // 已审核数据
       approvedData: [],
       RefusedData: [],
@@ -192,6 +220,7 @@ export default {
       isAll: false,
       showModal: false,// 弹窗是否显示
       showConfirmationModal: false,   // 控制确认通知申请人的弹窗
+      
 
 
 
@@ -240,6 +269,10 @@ export default {
       };
       return typeMap[status] || "default";  // 默认为默认按钮类型
     },
+    // 表头的背景色
+    headerCellStyle() {
+      return { backgroundColor: '#f1f1f1' };
+    },
     // 多选框选择事件处理
     handleSelectionChange(selection) {
       this.selectedPendingData = selection;
@@ -790,17 +823,11 @@ export default {
   height: 80px;
 }
 
-/* 设置表头背景颜色 */
-.el-table th {
-  background-color: #f5f7f9 !important;
-  /* 设置表头背景颜色 */
-  height: 60px;
+/* 使用v-deep深度，进入元素设置表格行的背景色 */
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
+  background-color: #f1f1f1;
 }
 
-/* 自定义斑马线的背景色 */
-.el-table .success-row {
-  background-color: #f0f9eb;
-}
 
 .address-column {
   margin: 0;