修改生产统计页面表格样式

src/views/emp/stat/index.vue

@@ -30,27 +30,17 @@
             </div>
             <div style="width: 33%;margin-left: 0.3%;">
                 <div class="caption">员工排名</div>
-                <table class="emptop_item" style="width: 100%;font-weight: bold;" cellspacing="0" cellpadding="0">
-                        <thead>
-                            <tr style="background-color: #409eff;color: #fff;">
-                                <td style="width: 19%;">&nbsp;&nbsp;姓名</td>
-                                <td style="width: 32%;">金额</td>
-                                <td style="width: 32%;">米数</td>
-                                <td style="width: 18%;">平均嫁动</td></tr>
-                        </thead>
-                    </table>
-                <div style="overflow-y: auto;height: 680px;color: #666;">                    
-                    <table class="emptop_item" style="width: 100%;" cellspacing="0" cellpadding="0">
-                        <tbody>
-                            <tr v-for="item in empToplist">
-                                <td style="width: 19%;">&nbsp;&nbsp;{{ item.empName }}</td>
-                                <td style="width: 32%;">{{ item.totalPrice }}</td>
-                                <td style="width: 32%;">{{ item.length }}</td>
-                                <td style="width: 18%;">{{ item.efficiency*100 }} %</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
+                
+                    <el-table :data="empToplist" height="680px">
+                      <el-table-column prop="empName"  align="center" label="姓名"/>
+                      <el-table-column prop="totalPrice"  align="center" label="金额"/>
+                      <el-table-column prop="length"  align="center" label="米数"/>
+                      <el-table-column prop="efficiency"  align="center" label="平均嫁动">
+                        <template #default="scope">
+                            {{ scope.row.efficiency*100 }} %
+                        </template>
+                      </el-table-column>
+                    </el-table>
             </div>
         </div>
     </div>
@@ -82,26 +72,7 @@
         border-radius: 4px;
         background-color: #f3f0f078;
     }
-    tbody>tr{
-        border: 1px solid #7DA2CD;
-        height: 32px;
-        font-size: 16px;
-        color: #fff;
-    }
-    tbody>tr:hover{
-        background-color:#fff !important;
-    }
-    tbody>tr:nth-child(odd) {
-        /* 奇数行 */
-        background-color: rgb(241 242 243);
-        color: #666;
-    }
-     
-    tbody>tr:nth-child(even) {
-        /* 偶数行 */
-        background-color: rgb(198 211 230 / 85%);
-        color: #666;
-    }
+
 </style>
 <script setup name="Emp">
     import {ref,reactive} from "vue";