From d7a3f52783a5f2f64c35251486a6e9b4a7c044a0 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: Sun, 24 Jul 2022 03:47:11 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(component):=20=E5=8F=91=E5=B8=83=201.?=
 =?UTF-8?q?3.6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package/component/package.json                |   2 +-
 .../src/component/table/TableRow.vue          |  15 +-
 .../component/src/component/table/index.less  |  44 ++--
 .../component/src/component/table/index.vue   | 238 +++++++-----------
 .../src/document/zh-CN/components/table.md    |   2 +-
 .../src/document/zh-CN/guide/changelog.md     |  12 +
 package/document-component/src/view/index.vue |  16 +-
 7 files changed, 131 insertions(+), 198 deletions(-)

diff --git a/package/component/package.json b/package/component/package.json
index e346b269..3bada062 100644
--- a/package/component/package.json
+++ b/package/component/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",
diff --git a/package/component/src/component/table/TableRow.vue b/package/component/src/component/table/TableRow.vue
index 1677f723..3ac1f6e7 100644
--- a/package/component/src/component/table/TableRow.vue
+++ b/package/component/src/component/table/TableRow.vue
@@ -6,12 +6,12 @@ export default {
 
 <script lang="ts" setup>
 import { Recordable } from "../../types";
+import { LayIcon } from "@layui/icons-vue";
 import { computed, ref, StyleValue, useSlots, WritableComputedRef } from "vue";
 import LayCheckbox from "../checkbox/index.vue";
-import LayRadio from "../radio/index.vue";
 import LayDropdown from "../dropdown/index.vue";
 import LayTooltip from "../tooltip/index.vue";
-import { LayIcon } from "@layui/icons-vue";
+import LayRadio from "../radio/index.vue";
 
 export interface LayTableRowProps {
   index: number;
@@ -190,9 +190,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
     @dblclick.stop="rowDoubleClick(data, $event)"
     @contextmenu.stop="contextmenu(data, $event)"
   >
-    <!-- 数据列 -->
     <template v-for="(column, columnIndex) in columns" :key="columnIndex">
-      <!-- 展示否 -->
       <template v-if="tableColumnKeys.includes(column.key)">
         <template v-if="column.type == 'radio'">
           <td
@@ -211,7 +209,6 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
               column.fixed ? `layui-table-fixed-${column.fixed}` : '',
             ]"
           >
-            <!-- 树表占位与缩进 -->
             <span
               v-if="expandSpace && columnIndex === expandIndex"
               :style="{ 'margin-right': currentIndentSize + 'px' }"
@@ -258,7 +255,6 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
               column.fixed ? `layui-table-fixed-${column.fixed}` : '',
             ]"
           >
-            <!-- 树表占位与缩进 -->
             <span
               v-if="expandSpace && columnIndex === expandIndex"
               :style="{ 'margin-right': currentIndentSize + 'px' }"
@@ -309,7 +305,6 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
               column.fixed ? `layui-table-fixed-${column.fixed}` : '',
             ]"
           >
-            <!-- 树表占位与缩进 -->
             <span
               v-if="expandSpace && columnIndex === expandIndex"
               :style="{ 'margin-right': currentIndentSize + 'px' }"
@@ -339,7 +334,6 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
           </td>
         </template>
 
-        <!-- 插槽列 -->
         <template v-if="column.customSlot">
           <td
             class="layui-table-cell"
@@ -357,7 +351,6 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
               column.fixed ? `layui-table-fixed-${column.fixed}` : '',
             ]"
           >
-            <!-- 树表占位与缩进 -->
             <span
               v-if="expandSpace && columnIndex === expandIndex"
               :style="{ 'margin-right': currentIndentSize + 'px' }"
@@ -394,7 +387,6 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
           </td>
         </template>
 
-        <!-- 匹 配 Column -->
         <template v-else>
           <template v-if="column.key in data">
             <td
@@ -413,7 +405,6 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
                 column.fixed ? `layui-table-fixed-${column.fixed}` : '',
               ]"
             >
-              <!-- 树表占位与缩进 -->
               <span
                 v-if="expandSpace && columnIndex === expandIndex"
                 :style="{ 'margin-right': currentIndentSize + 'px' }"
@@ -454,12 +445,10 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
     </template>
   </tr>
 
-  <!-- 嵌套表单 -->
   <tr class="layui-table-cell-expand" v-if="slot.expand && isExpand">
     <slot name="expand" :data="data"></slot>
   </tr>
 
-  <!-- 树形结构 -->
   <template v-if="data[childrenColumnName] && isExpand">
     <template
       v-for="(children, childrenIndex) in data[childrenColumnName]"
diff --git a/package/component/src/component/table/index.less b/package/component/src/component/table/index.less
index 8ab7dd10..9c93971a 100644
--- a/package/component/src/component/table/index.less
+++ b/package/component/src/component/table/index.less
@@ -111,7 +111,7 @@
 .layui-table-view .layui-table {
   position: relative;
   margin: 0;
-  border-collapse: collapse;
+  border-collapse: separate;
 }
 
 .layui-table-view .layui-table[lay-skin="line"] {
@@ -420,24 +420,6 @@
   border-right: none !important;
 }
 
-.layui-table-fixed-left,
-.layui-table-fixed-right {
-  outline-width: 1px;
-  outline-style: solid;
-  outline-color: #eee;
-  border: none !important;
-}
-
-.layui-table-fixed-left-last::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: -1px;
-  width: 30px;
-  transform: translate(100%);
-  transition: box-shadow 0.3s;
-}
-
 .layui-table-tool-checkbox{
   padding: 10px;
 }
@@ -447,7 +429,24 @@
   margin-bottom: 12px;
 }
 
+.layui-table-has-fixed-left .layui-table-fixed-left-last {
+  overflow: initial!important;
+}
+
+.layui-table-has-fixed-right .layui-table-fixed-right-first {
+  overflow: initial!important;
+}
+
 .layui-table-fixed-left-last::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: -1px;
+  width: 30px;
+  transform: translate(100%);
+  transition: box-shadow .3s;
+  content: "";
+  pointer-events: none;
   box-shadow: inset 10px 0 8px -8px #00000026;
 }
 
@@ -458,10 +457,9 @@
   left: 0;
   width: 30px;
   transform: translate(-100%);
-  transition: box-shadow 0.3s;
-}
-
-.layui-table-fixed-right-first::after {
+  transition: box-shadow .3s;
+  content: "";
+  pointer-events: none;
   box-shadow: inset -10px 0 8px -8px #00000026;
 }
 
diff --git a/package/component/src/component/table/index.vue b/package/component/src/component/table/index.vue
index 7113be25..b284a838 100644
--- a/package/component/src/component/table/index.vue
+++ b/package/component/src/component/table/index.vue
@@ -176,7 +176,7 @@ const exportData = () => {
           throw new Error("exception");
         }
       });
-    } catch (e) {}
+    } catch (e) { }
   });
   tableDataSource.value.forEach((item) => {
     let obj: any = [];
@@ -250,13 +250,51 @@ const getScrollWidth = () => {
   }
 };
 
+const hasl = ref(false);
+const hasr = ref(false);
+
+const classes = computed(() => {
+  return [
+    hasl.value ? "layui-table-has-fixed-left" : "",
+    hasr.value ? "layui-table-has-fixed-right" : "",
+  ];
+});
+
 onMounted(() => {
   getScrollWidth();
+  getFixedColumn();
   tableBody.value?.addEventListener("scroll", () => {
-    tableHeader.value!.scrollLeft = tableBody.value?.scrollLeft || 0;
+    getFixedColumn();
   });
+  window.onresize = () => {
+    getFixedColumn();
+  }
 });
 
+
+const getFixedColumn = () => {
+  tableHeader.value!.scrollLeft = tableBody.value?.scrollLeft || 0;
+  // @ts-ignore
+  if( tableBody.value?.scrollWidth > tableBody.value?.clientWidth) {
+  if (tableBody.value?.scrollLeft == 0) {
+    hasl.value = false;
+    hasr.value = true;
+  } else {
+    // @ts-ignore
+    if (tableBody.value?.scrollLeft + tableBody.value?.offsetWidth > tableBody.value?.scrollWidth) {
+      hasl.value = true;
+      hasr.value = false;
+    } else {
+      hasl.value = true;
+      hasr.value = true;
+    }
+  }
+  } else {
+    hasl.value = false;
+    hasr.value = false;
+  }
+}
+
 const slotsData = ref<string[]>([]);
 
 props.columns.map((value: any) => {
@@ -265,8 +303,8 @@ props.columns.map((value: any) => {
   }
 });
 
-const childrenExpandSpace = ref(false);
 const currentIndentSize = ref(0);
+const childrenExpandSpace = ref(false);
 
 props.dataSource.map((value: any) => {
   if (value[props.childrenColumnName]) {
@@ -336,7 +374,7 @@ const renderTotalRowCell = (column: any) => {
     } else {
       let total = 0;
       tableDataSource.value.forEach((item) => {
-        total = total + item[column.key];
+        total = total + Number(item[column.key]);
       });
       return total;
     }
@@ -347,7 +385,7 @@ const renderTotalRowCell = (column: any) => {
 <template>
   <div :id="tableId">
     <table class="layui-hide" lay-filter="test"></table>
-    <div class="layui-form layui-border-box layui-table-view">
+    <div class="layui-form layui-border-box layui-table-view" :class="classes">
       <!-- 工具栏 -->
       <div v-if="defaultToolbar || slot.toolbar" class="layui-table-tool">
         <div v-if="slot.toolbar" class="layui-table-tool-temp">
@@ -360,31 +398,15 @@ const renderTotalRowCell = (column: any) => {
             </div>
             <template #content>
               <div class="layui-table-tool-checkbox">
-                <lay-checkbox
-                  v-for="column in columns"
-                  v-model="tableColumnKeys"
-                  skin="primary"
-                  :key="column.key"
-                  :value="column.key"
-                  >{{ column.title }}</lay-checkbox
-                >
+                <lay-checkbox v-for="column in columns" v-model="tableColumnKeys" skin="primary" :key="column.key"
+                  :value="column.key">{{ column.title }}</lay-checkbox>
               </div>
             </template>
           </lay-dropdown>
-          <div
-            class="layui-inline"
-            title="导出"
-            lay-event="LAYTABLE_PRINT"
-            @click="exportData()"
-          >
+          <div class="layui-inline" title="导出" lay-event="LAYTABLE_PRINT" @click="exportData()">
             <i class="layui-icon layui-icon-export"></i>
           </div>
-          <div
-            class="layui-inline"
-            title="打印"
-            lay-event="LAYTABLE_PRINT"
-            @click="print()"
-          >
+          <div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT" @click="print()">
             <i class="layui-icon layui-icon-print"></i>
           </div>
         </div>
@@ -392,65 +414,40 @@ const renderTotalRowCell = (column: any) => {
 
       <div class="layui-table-box">
         <!-- 表头 -->
-        <div
-          class="layui-table-header"
-          :style="[{ 'padding-right': `${scrollWidthCell}px` }]"
-        >
-          <div
-            class="layui-table-header-wrapper"
-            ref="tableHeader"
-            :style="[
-              scrollWidthCell > 0 ? 'border-right: 1px solid #eee;' : '',
-            ]"
-          >
+        <div class="layui-table-header" :style="[{ 'padding-right': `${scrollWidthCell}px` }]">
+          <div class="layui-table-header-wrapper" ref="tableHeader">
             <table class="layui-table" :lay-size="size" :lay-skin="skin">
               <colgroup>
                 <template v-for="column in columns" :key="column">
                   <template v-if="tableColumnKeys.includes(column.key)">
-                    <col
-                      :width="column.width"
-                      :style="{
-                        minWidth: column.minWidth ? column.minWidth : '50px',
-                      }"
-                    />
+                    <col :width="column.width" :style="{
+                      minWidth: column.minWidth ? column.minWidth : '50px',
+                    }" />
                   </template>
                 </template>
               </colgroup>
               <thead>
                 <tr>
-                  <template
-                    v-for="(column, columnIndex) in columns"
-                    :key="column"
-                  >
-                    <th
-                      v-if="tableColumnKeys.includes(column.key)"
-                      class="layui-table-cell"
-                      :class="[
-                        column.fixed ? `layui-table-fixed-${column.fixed}` : '',
-                        renderFixedClassName(column, columnIndex),
-                        column.type == 'checkbox'
-                          ? 'layui-table-cell-checkbox'
-                          : '',
-                        column.type == 'radio' ? 'layui-table-cell-radio' : '',
-                        column.type == 'number'
-                          ? 'layui-table-cell-number'
-                          : '',
-                      ]"
-                      :style="[
-                        {
-                          textAlign: column.align,
-                        },
-                        renderFixedStyle(column, columnIndex),
-                      ]"
-                    >
+                  <template v-for="(column, columnIndex) in columns" :key="column">
+                    <th v-if="tableColumnKeys.includes(column.key)" class="layui-table-cell" :class="[
+                      column.fixed ? `layui-table-fixed-${column.fixed}` : '',
+                      renderFixedClassName(column, columnIndex),
+                      column.type == 'checkbox'
+                        ? 'layui-table-cell-checkbox'
+                        : '',
+                      column.type == 'radio' ? 'layui-table-cell-radio' : '',
+                      column.type == 'number'
+                        ? 'layui-table-cell-number'
+                        : '',
+                    ]" :style="[
+  {
+    textAlign: column.align,
+  },
+  renderFixedStyle(column, columnIndex),
+]">
                       <template v-if="column.type == 'checkbox'">
-                        <lay-checkbox
-                          v-model="hasChecked"
-                          :is-indeterminate="!allChecked"
-                          skin="primary"
-                          value="all"
-                          @change="changeAll"
-                        />
+                        <lay-checkbox v-model="hasChecked" :is-indeterminate="!allChecked" skin="primary" value="all"
+                          @change="changeAll" />
                       </template>
                       <template v-else>
                         <span>
@@ -462,21 +459,11 @@ const renderTotalRowCell = (column: any) => {
                           </template>
                         </span>
                         <!-- 插槽 -->
-                        <span
-                          v-if="column.sort"
-                          class="layui-table-sort layui-inline"
-                          lay-sort
-                        >
-                          <i
-                            @click.stop="sortTable($event, column.key, 'asc')"
-                            class="layui-edge layui-table-sort-asc"
-                            title="升序"
-                          ></i>
-                          <i
-                            @click.stop="sortTable($event, column.key, 'desc')"
-                            class="layui-edge layui-table-sort-desc"
-                            title="降序"
-                          ></i>
+                        <span v-if="column.sort" class="layui-table-sort layui-inline" lay-sort>
+                          <i @click.stop="sortTable($event, column.key, 'asc')" class="layui-edge layui-table-sort-asc"
+                            title="升序"></i>
+                          <i @click.stop="sortTable($event, column.key, 'desc')"
+                            class="layui-edge layui-table-sort-desc" title="降序"></i>
                         </span>
                       </template>
                     </th>
@@ -487,56 +474,28 @@ const renderTotalRowCell = (column: any) => {
           </div>
         </div>
         <!-- 表身 -->
-        <div
-          class="layui-table-body layui-table-main"
-          :style="{ height: height, maxHeight: maxHeight }"
-          ref="tableBody"
-        >
-          <table
-            v-if="tableDataSource.length > 0"
-            class="layui-table"
-            :class="{ 'layui-table-even': props.even }"
-            :lay-size="size"
-            :lay-skin="skin"
-          >
+        <div class="layui-table-body layui-table-main" :style="{ height: height, maxHeight: maxHeight }"
+          ref="tableBody">
+          <table v-if="tableDataSource.length > 0" class="layui-table" :class="{ 'layui-table-even': props.even }"
+            :lay-size="size" :lay-skin="skin">
             <colgroup>
-              <template
-                v-for="(column, columnIndex) in columns"
-                :key="columnIndex"
-              >
+              <template v-for="(column, columnIndex) in columns" :key="columnIndex">
                 <template v-if="tableColumnKeys.includes(column.key)">
-                  <col
-                    :width="column.width"
-                    :style="{
-                      minWidth: column.minWidth ? column.minWidth : '50px',
-                    }"
-                  />
+                  <col :width="column.width" :style="{
+                    minWidth: column.minWidth ? column.minWidth : '50px',
+                  }" />
                 </template>
               </template>
             </colgroup>
             <tbody>
               <!-- 渲染 -->
               <template v-for="(data, index) in tableDataSource" :key="index">
-                <table-row
-                  :id="id"
-                  :index="index"
-                  :data="data"
-                  :columns="columns"
-                  :indent-size="indentSize"
-                  :currentIndentSize="currentIndentSize"
-                  :tableColumnKeys="tableColumnKeys"
-                  :expandSpace="childrenExpandSpace"
-                  :expandIndex="expandIndex"
-                  :cellStyle="cellStyle"
-                  :cellClassName="cellClassName"
-                  :rowStyle="rowStyle"
-                  :rowClassName="rowClassName"
-                  @row="rowClick"
-                  @row-double="rowDoubleClick"
-                  @contextmenu="contextmenu"
-                  v-model:selectedKeys="tableSelectedKeys"
-                  v-model:selectedKey="tableSelectedKey"
-                >
+                <table-row :id="id" :index="index" :data="data" :columns="columns" :indent-size="indentSize"
+                  :currentIndentSize="currentIndentSize" :tableColumnKeys="tableColumnKeys"
+                  :expandSpace="childrenExpandSpace" :expandIndex="expandIndex" :cellStyle="cellStyle"
+                  :cellClassName="cellClassName" :rowStyle="rowStyle" :rowClassName="rowClassName" @row="rowClick"
+                  @row-double="rowDoubleClick" @contextmenu="contextmenu" v-model:selectedKeys="tableSelectedKeys"
+                  v-model:selectedKey="tableSelectedKey">
                   <template v-for="name in slotsData" #[name]="{ data }">
                     <slot :name="name" :data="data"></slot>
                   </template>
@@ -545,12 +504,8 @@ const renderTotalRowCell = (column: any) => {
                   </template>
                 </table-row>
               </template>
-              <!-- totalRow -->
               <tr v-if="hasTotalRow" class="layui-table-total">
-                <template
-                  v-for="(column, columnIndex) in columns"
-                  :key="columnIndex"
-                >
+                <template v-for="(column, columnIndex) in columns" :key="columnIndex">
                   <template v-if="tableColumnKeys.includes(column.key)">
                     <td>{{ renderTotalRowCell(column) }}</td>
                   </template>
@@ -562,15 +517,8 @@ const renderTotalRowCell = (column: any) => {
         </div>
       </div>
       <div v-if="page" class="layui-table-page">
-        <lay-page
-          show-page
-          show-skip
-          show-limit
-          :total="page.total"
-          :limit="page.limit"
-          v-model="page.current"
-          @jump="change"
-        >
+        <lay-page show-page show-skip show-limit :total="page.total" :limit="page.limit" v-model="page.current"
+          @jump="change">
           <template #prev>
             <lay-icon type="layui-icon-left" />
           </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 f1b893fa..815a59f5 100644
--- a/package/document-component/src/document/zh-CN/components/table.md
+++ b/package/document-component/src/document/zh-CN/components/table.md
@@ -977,7 +977,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-table :columns="columns5" id="id" :expand-index="1" :data-source="dataSource5" v-model:selected-keys="selectedKeys5" :checkbox="checkbox5" :default-toolbar="defaultToolbar5" @row="rowClick5" height="200px">
+  <lay-table :columns="columns5" id="id" :expand-index="1" :data-source="dataSource5" v-model:selected-keys="selectedKeys5" :checkbox="checkbox5" :default-toolbar="defaultToolbar5" @row="rowClick5" max-height="200px">
     <template v-slot:toolbar>
       <lay-button size="sm">新增</lay-button>
       <lay-button size="sm">删除</lay-button>
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 824ff486..cfff7647 100644
--- a/package/document-component/src/document/zh-CN/guide/changelog.md
+++ b/package/document-component/src/document/zh-CN/guide/changelog.md
@@ -11,6 +11,18 @@
 <template>
 <lay-timeline>
   <lay-timeline-item title="1.3.x">
+    <ul> 
+      <a name="1-3-6"></a> 
+      <li> 
+        <h3>1.3.6 <span class="layui-badge-rim">2022-07-24</span></h3> 
+        <ul>     
+          <li>[修复] table 组件 totalRow 属性, 计算 string 类型数字拼接的问题。</li>
+          <li>[修复] table 组件 columns 配置 fixed 属性开启时, 固定列无阴影的问题。</li>    
+          <li>[修复] table 组件 filterColumns 布局。</li>
+          <li>[优化] panel 组件 css 样式。</li>
+        </ul>
+      </li>
+    </ul>
      <ul> 
       <a name="1-3-5"></a> 
       <li> 
diff --git a/package/document-component/src/view/index.vue b/package/document-component/src/view/index.vue
index d25b23e3..92f2dbae 100644
--- a/package/document-component/src/view/index.vue
+++ b/package/document-component/src/view/index.vue
@@ -186,21 +186,7 @@
               target="_blank"
             >
               <lay-avatar
-                src="https://portrait.gitee.com/uploads/avatars/namespace/2319/6958819_pear-admin_1643085106.png"
-                style="background: transparent"
-              ></lay-avatar>
-            </a>
-          </lay-tooltip>
-        </lay-col>
-        <lay-col :md="3">
-          <lay-tooltip content="Pear Admin" position="top">
-            <a
-              style="height: 40px; display: inline-block"
-              href="http://www.pearadmin.com"
-              target="_blank"
-            >
-              <lay-avatar
-                src="https://portrait.gitee.com/uploads/avatars/namespace/2319/6958819_pear-admin_1643085106.png"
+                src="https://portrait.gitee.com/uploads/avatars/namespace/2319/6958819_pear-admin_1643085106.png!avatar100"
                 style="background: transparent"
               ></lay-avatar>
             </a>