✨(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>

package/document-component/src/document/zh-CN/components/table.md

@@ -912,6 +912,65 @@ export default {
 
 :::
 
+::: title 合并列值
+:::
+
+::: demo 通过 `columns` 配置 `type:'number'` 开启序号列。
+
+<template>
+  <lay-table :columns="columns26" :dataSource="dataSource26"></lay-table>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const columns26 = [
+      {
+        title:"账户",
+        width:"200px",
+        key:"username"
+      },{
+        title:"密码",
+        width: "300px",
+        key:"password"
+      },{
+        title:"性别",
+        key:"sex",
+        totalRow:"合并:"
+      },{
+        title:"年龄",
+        width: "300px",
+        key:"age",
+        totalRow: true
+      },{
+        title:"备注",
+        width: "180px",
+        key:"remark",
+        ellipsisTooltip: true
+      }
+    ]
+
+    const dataSource26 = [
+      {username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '}
+    ]
+
+    return {
+      columns26,
+      dataSource26,
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 完整表格
 :::
 

package/document-component/src/document/zh-CN/guide/changelog.md

@@ -23,6 +23,7 @@
           <li>[新增] table 组件 columns 配置 type 属性 radio 值, 开启单选列。</li>
           <li>[新增] table 组件 columns 配置 type 属性 checkbox 值, 开启复选列。</li>
           <li>[新增] table 组件 columns 配置 type 属性 number 值, 开启序号列。</li>
+          <li>[新增] table 组件 columns 配置 totalRow 属性, 开启列值统计。</li>
           <li>[新增] table 组件 selected-key 属性, 配置单选列的选中值。</li>
           <li>[新增] table 组件 data-source 属性, 长度为 0 时的显示状态。</li>
           <li>[新增] date-picker 组件 年月日 范围选择, 重构代码。</li>

package/document-component/src/document/zh-CN/guide/theme.md

@@ -13,8 +13,8 @@
 
 <script setup>
 const themeVariable = { 
-    "--global-primary-color":"red",
+    "global-primary-color":"red",
-    "--global-checked-color":"red"
+    "global-checked-color":"red"
 }
 </script>
 ```
@@ -22,32 +22,32 @@ const themeVariable = {
 :::
 
 ```
---global-primary-color: #009688; // 主题色
+global-primary-color: #009688; // 主题色
 
---global-normal-color: #1e9fff; // 通用色
+global-normal-color: #1e9fff; // 通用色
 
---global-warm-color: #ffb800; // 警告色
+global-warm-color: #ffb800; // 警告色
 
---global-danger-color: #ff5722; // 危险色
+global-danger-color: #ff5722; // 危险色
 
---global-checked-color: #5fb878; // 选中色
+global-checked-color: #5fb878; // 选中色
 
---global-border-radius: 2px; // 圆角度
+global-border-radius: 2px; // 圆角度
 
---global-neutral-color-1: #FAFAFA; // 辅助色-1
+global-neutral-color-1: #FAFAFA; // 辅助色-1
 
---global-neutral-color-2: #F6F6F6; // 辅助色-2
+global-neutral-color-2: #F6F6F6; // 辅助色-2
     
---global-neutral-color-3: #eeeeee; // 辅助色-3
+global-neutral-color-3: #eeeeee; // 辅助色-3
     
---global-neutral-color-4: #e2e2e2; // 辅助色-4
+global-neutral-color-4: #e2e2e2; // 辅助色-4
   
---global-neutral-color-5: #dddddd; // 辅助色-5
+global-neutral-color-5: #dddddd; // 辅助色-5
   
---global-neutral-color-6: #d2d2d2; // 辅助色-6
+global-neutral-color-6: #d2d2d2; // 辅助色-6
   
---global-neutral-color-7: #cccccc; // 辅助色-7
+global-neutral-color-7: #cccccc; // 辅助色-7
   
---global-neutral-color-8: #c2c2c2; // 辅助色-8
+global-neutral-color-8: #c2c2c2; // 辅助色-8
 
 ```