From 876947c79e1d663d08010b7ecf6aec702ad94cac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Tue, 19 Jul 2022 05:01:43 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(component):=20=E6=96=B0=E5=A2=9E=20ta?=
 =?UTF-8?q?ble=20=E7=BB=84=E4=BB=B6=20columns=20=E9=85=8D=E7=BD=AE=20total?=
 =?UTF-8?q?Row=20=E5=B1=9E=E6=80=A7,=20=E7=94=A8=E4=BA=8E=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=88=97=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/component/datePicker/index.vue        |  1 -
 .../component/src/component/table/index.vue   | 41 ++++++++++++-
 package/component/src/provider/index.vue      |  7 ++-
 .../src/document/zh-CN/components/table.md    | 59 +++++++++++++++++++
 .../src/document/zh-CN/guide/changelog.md     |  1 +
 .../src/document/zh-CN/guide/theme.md         | 32 +++++-----
 6 files changed, 121 insertions(+), 20 deletions(-)

diff --git a/package/component/src/component/datePicker/index.vue b/package/component/src/component/datePicker/index.vue
index 10999161..0c94a0a2 100644
--- a/package/component/src/component/datePicker/index.vue
+++ b/package/component/src/component/datePicker/index.vue
@@ -112,7 +112,6 @@ import {
   watch,
   defineProps,
   defineEmits,
-  onMounted,
   reactive,
   provide,
 } from "vue";
diff --git a/package/component/src/component/table/index.vue b/package/component/src/component/table/index.vue
index 979bbf1a..4574ff5c 100644
--- a/package/component/src/component/table/index.vue
+++ b/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>
diff --git a/package/component/src/provider/index.vue b/package/component/src/provider/index.vue
index 92862c11..58b7733a 100644
--- a/package/component/src/provider/index.vue
+++ b/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>
diff --git a/package/document-component/src/document/zh-CN/components/table.md b/package/document-component/src/document/zh-CN/components/table.md
index e23bfa9c..8a08dbbf 100644
--- a/package/document-component/src/document/zh-CN/components/table.md
+++ b/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 完整表格
 :::
 
diff --git a/package/document-component/src/document/zh-CN/guide/changelog.md b/package/document-component/src/document/zh-CN/guide/changelog.md
index 631b84ec..c8d91705 100644
--- a/package/document-component/src/document/zh-CN/guide/changelog.md
+++ b/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>
diff --git a/package/document-component/src/document/zh-CN/guide/theme.md b/package/document-component/src/document/zh-CN/guide/theme.md
index 4e8e0cb7..49921d6c 100644
--- a/package/document-component/src/document/zh-CN/guide/theme.md
+++ b/package/document-component/src/document/zh-CN/guide/theme.md
@@ -13,8 +13,8 @@
 
 <script setup>
 const themeVariable = { 
-    "--global-primary-color":"red",
-    "--global-checked-color":"red"
+    "global-primary-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
 
 ```
\ No newline at end of file