Feature: 为表格增删添加动画 & 修改表格颜色

src/components/Modules/MultiLayerPaperTapeWidthAngleCalculate.vue

@@ -129,6 +129,7 @@
 
           <v-table
             fixed-header
+            theme="primary"
           >
             <thead>
               <tr>
@@ -139,17 +140,18 @@
                 <th>{{ $t('paperWidth') }}</th>
               </tr>
             </thead>
-            <tbody>
+            <transition-group name="fade" tag="tbody">
-              <tr v-for="(record, index) in recordList" :key="index">
+              <tr v-for="(record, index) in recordList" :key="index" class="table-row-item">
                 <td>{{ record.layer }}</td>
                 <td>{{ record.grammage.value.toFixed(2) }} {{ record.grammage.unit }}</td>
                 <td>{{ record.cumulativeThickness.value.toFixed(2) }} {{ record.cumulativeThickness.unit }}</td>
                 <td>{{ record.angle.value.toFixed(2) }} {{ record.angle.unit }}</td>
                 <td>{{ record.paperWidth.value.toFixed(2) }} {{ record.paperWidth.unit }}</td>
               </tr>
-            </tbody>
+            </transition-group>
           </v-table>
         </v-card>
+
       </v-col>
     </v-row>
   </div>
@@ -220,3 +222,22 @@
     recordList.value.pop()
   }
 </script>
+
+<style scoped>
+.table-row-item {
+  /* ensure rows still render as table rows */
+  display: table-row;
+}
+
+/* enter/leave transitions */
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 300ms ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+</style>

src/plugins/vuetify.ts

@@ -22,6 +22,7 @@ const jinshenLightTheme: ThemeDefinition = {
     info: '#2196F3', // Light Blue
     success: '#4CAF50', // Green
     warning: '#FB8C00', // Orange
+    surface: '#FFFFFF', // White
   },
 }