保存进度！

code/web/task_schedule/src/components/RankingListComponent.vue

@@ -9,7 +9,40 @@
 -->
 <template>
     <div class="rankinglist-wrapper">
-        排行榜组件
+        <el-table
+            :data="topFive"
+            stripe
+            style="width:100%;"
+            :header-cell-style="{background:'#fecb96'}"
+        >
+            <el-table-column
+                label="名次"
+                width="60"
+                align="center"
+            >
+                <template #default="ranking">
+                    <span class="rankinglist-index">{{ ranking.row.index }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column
+                label="名次"
+                width="160"
+                align="center"
+            >
+                <template #default="ranking">
+                    <span class="rankinglist-index">{{ ranking.row.callerName }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column
+                label="指标"
+                width="80"
+                align="center"
+            >
+                <template #default="ranking">
+                    <span class="rankinglist-index">{{ ranking.row.appraiseValue }}</span>
+                </template>
+            </el-table-column>
+        </el-table>
     </div>
 </template>
 
@@ -42,7 +75,7 @@ export default {
      * setup函数
      * @param props 组件的props属性。
      */
-    setup( props )
+    setup(props)
     {
         /**
          * 计算对象，用于获取top5.
@@ -51,13 +84,13 @@ export default {
         {
             const rankingList = props.rankingList; // eslint-disable-line
 
-            rankingList.sort(( a, b ) =>
+            rankingList.sort((a, b) =>
             {
                 // @ts-ignore
                 return a.index - b.index;
             });
 
-            return rankingList.slice(0,5);
+            return rankingList.slice(0, 5);
         });
 
         return { props, topFive, };
@@ -66,13 +99,34 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.rankinglist-wrapper
-{
-    border: 1px solid red;
-
+.rankinglist-wrapper {
+    // border: 1px solid red;
+    border-radius: 5px;
     width: 300px;
     height: 250px;
-
-    font-size: 12px;
 }
+
+.rankinglist-index {
+    display: block;
+    text-align: center;
+}
+
+:deep(.el-table)
+{
+    border-radius: 5px;
+}
+
+:deep(.el-table__header-wrapper) {
+  thead {
+    th{
+      div{
+        // font-family: "FZ-ZHUOHEI";
+        font-weight: 500;
+        font-size: 15px;
+        color: #da3703;
+      }
+    }
+  }
+}
+
 </style>