✨(component): 新增 table 组件 columns 配置 totalRow 属性, 用于支持列统计

package/component/src/component/datePicker/index.vue

@@ -112,7 +112,6 @@ import {
   watch,
   defineProps,
   defineEmits,
-  onMounted,
   reactive,
   provide,
 } from "vue";

package/component/src/component/table/index.vue

@@ -12,7 +12,6 @@ import {
   useSlots,
   withDefaults,
   onMounted,
-  onUpdated,
   StyleValue,
   WritableComputedRef,
   computed,
@@ -319,6 +318,30 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
     }
   }
 };
+
+const hasTotalRow = computed(() => {
+  let b = false;
+  props.columns.forEach(item => {
+    if(item.totalRow) {
+      b = true;
+    }
+  })
+  return b;
+})
+
+const renderTotalRowCell = (column: any) => {
+  if(column.totalRow) {
+    if(column.totalRow != true) {
+      return column.totalRow;
+    } else {
+      let total = 0;
+      tableDataSource.value.forEach(item => {
+        total = total + item[column.key];
+      })
+      return total;
+    }
+  }
+}
 </script>
 
 <template>
@@ -472,7 +495,10 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
             :lay-skin="skin"
           >
             <colgroup>
-              <template v-for="column in columns" :key="column">
+              <template
+                v-for="(column, columnIndex) in columns"
+                :key="columnIndex"
+              >
                 <template v-if="tableColumnKeys.includes(column.key)">
                   <col
                     :width="column.width"
@@ -514,6 +540,17 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
                   </template>
                 </table-row>
               </template>
+              <!-- totalRow -->
+              <tr v-if="hasTotalRow" class="layui-table-total">
+                <template
+                  v-for="(column, columnIndex) in columns"
+                  :key="columnIndex"
+                >
+                  <template v-if="tableColumnKeys.includes(column.key)">
+                    <td>{{ renderTotalRowCell(column) }}</td>
+                  </template>
+                </template>
+              </tr>
             </tbody>
           </table>
           <lay-empty v-else></lay-empty>

package/component/src/provider/index.vue

@@ -15,6 +15,7 @@ import {
   auto as followSystemColorScheme,
   setFetchMethod,
 } from "@umijs/ssr-darkreader";
+import { v4 as uuidv4 } from "../utils/guidUtil";
 
 export interface LayConfigProviderProps {
   locale?: string;
@@ -29,6 +30,8 @@ const props = withDefaults(defineProps<LayConfigProviderProps>(), {
   theme: "light",
 });
 
+const id = uuidv4();
+
 const { locale, setLocaleMessage, mergeLocaleMessage } = useI18n();
 
 const ignoreInlineStyle = [
@@ -130,5 +133,7 @@ watch(
 </script>
 
 <template>
-  <slot></slot>
+  <div :id="id">
+    <slot></slot>
+  </div>
 </template>