✨(component): 发布 1.3.6

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",

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]"

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;
+  transition: box-shadow .3s;
-}
+  content: "";
-
+  pointer-events: none;
-.layui-table-fixed-right-first::after {
   box-shadow: inset -10px 0 8px -8px #00000026;
 }
 

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
+                <lay-checkbox v-for="column in columns" v-model="tableColumnKeys" skin="primary" :key="column.key"
-                  v-for="column in columns"
+                  :value="column.key">{{ column.title }}</lay-checkbox>
-                  v-model="tableColumnKeys"
-                  skin="primary"
-                  :key="column.key"
-                  :value="column.key"
-                  >{{ column.title }}</lay-checkbox
-                >
               </div>
             </template>
           </lay-dropdown>
-          <div
+          <div class="layui-inline" title="导出" lay-event="LAYTABLE_PRINT" @click="exportData()">
-            class="layui-inline"
-            title="导出"
-            lay-event="LAYTABLE_PRINT"
-            @click="exportData()"
-          >
             <i class="layui-icon layui-icon-export"></i>
           </div>
-          <div
+          <div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT" @click="print()">
-            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
+        <div class="layui-table-header" :style="[{ 'padding-right': `${scrollWidthCell}px` }]">
-          class="layui-table-header"
+          <div class="layui-table-header-wrapper" ref="tableHeader">
-          :style="[{ 'padding-right': `${scrollWidthCell}px` }]"
-        >
-          <div
-            class="layui-table-header-wrapper"
-            ref="tableHeader"
-            :style="[
-              scrollWidthCell > 0 ? 'border-right: 1px solid #eee;' : '',
-            ]"
-          >
             <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
+                    <col :width="column.width" :style="{
-                      :width="column.width"
+                      minWidth: column.minWidth ? column.minWidth : '50px',
-                      :style="{
+                    }" />
-                        minWidth: column.minWidth ? column.minWidth : '50px',
-                      }"
-                    />
                   </template>
                 </template>
               </colgroup>
               <thead>
                 <tr>
-                  <template
+                  <template v-for="(column, columnIndex) in columns" :key="column">
-                    v-for="(column, columnIndex) in columns"
+                    <th v-if="tableColumnKeys.includes(column.key)" class="layui-table-cell" :class="[
-                    :key="column"
+                      column.fixed ? `layui-table-fixed-${column.fixed}` : '',
-                  >
+                      renderFixedClassName(column, columnIndex),
-                    <th
+                      column.type == 'checkbox'
-                      v-if="tableColumnKeys.includes(column.key)"
+                        ? 'layui-table-cell-checkbox'
-                      class="layui-table-cell"
+                        : '',
-                      :class="[
+                      column.type == 'radio' ? 'layui-table-cell-radio' : '',
-                        column.fixed ? `layui-table-fixed-${column.fixed}` : '',
+                      column.type == 'number'
-                        renderFixedClassName(column, columnIndex),
+                        ? 'layui-table-cell-number'
-                        column.type == 'checkbox'
+                        : '',
-                          ? 'layui-table-cell-checkbox'
+                    ]" :style="[
-                          : '',
+  {
-                        column.type == 'radio' ? 'layui-table-cell-radio' : '',
+    textAlign: column.align,
-                        column.type == 'number'
+  },
-                          ? 'layui-table-cell-number'
+  renderFixedStyle(column, columnIndex),
-                          : '',
+]">
-                      ]"
-                      :style="[
-                        {
-                          textAlign: column.align,
-                        },
-                        renderFixedStyle(column, columnIndex),
-                      ]"
-                    >
                       <template v-if="column.type == 'checkbox'">
-                        <lay-checkbox
+                        <lay-checkbox v-model="hasChecked" :is-indeterminate="!allChecked" skin="primary" value="all"
-                          v-model="hasChecked"
+                          @change="changeAll" />
-                          :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
+                        <span v-if="column.sort" class="layui-table-sort layui-inline" lay-sort>
-                          v-if="column.sort"
+                          <i @click.stop="sortTable($event, column.key, 'asc')" class="layui-edge layui-table-sort-asc"
-                          class="layui-table-sort layui-inline"
+                            title="升序"></i>
-                          lay-sort
+                          <i @click.stop="sortTable($event, column.key, 'desc')"
-                        >
+                            class="layui-edge layui-table-sort-desc" title="降序"></i>
-                          <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
+        <div class="layui-table-body layui-table-main" :style="{ height: height, maxHeight: maxHeight }"
-          class="layui-table-body layui-table-main"
+          ref="tableBody">
-          :style="{ height: height, maxHeight: maxHeight }"
+          <table v-if="tableDataSource.length > 0" class="layui-table" :class="{ 'layui-table-even': props.even }"
-          ref="tableBody"
+            :lay-size="size" :lay-skin="skin">
-        >
-          <table
-            v-if="tableDataSource.length > 0"
-            class="layui-table"
-            :class="{ 'layui-table-even': props.even }"
-            :lay-size="size"
-            :lay-skin="skin"
-          >
             <colgroup>
-              <template
+              <template v-for="(column, columnIndex) in columns" :key="columnIndex">
-                v-for="(column, columnIndex) in columns"
-                :key="columnIndex"
-              >
                 <template v-if="tableColumnKeys.includes(column.key)">
-                  <col
+                  <col :width="column.width" :style="{
-                    :width="column.width"
+                    minWidth: column.minWidth ? column.minWidth : '50px',
-                    :style="{
+                  }" />
-                      minWidth: column.minWidth ? column.minWidth : '50px',
-                    }"
-                  />
                 </template>
               </template>
             </colgroup>
             <tbody>
               <!-- 渲染 -->
               <template v-for="(data, index) in tableDataSource" :key="index">
-                <table-row
+                <table-row :id="id" :index="index" :data="data" :columns="columns" :indent-size="indentSize"
-                  :id="id"
+                  :currentIndentSize="currentIndentSize" :tableColumnKeys="tableColumnKeys"
-                  :index="index"
+                  :expandSpace="childrenExpandSpace" :expandIndex="expandIndex" :cellStyle="cellStyle"
-                  :data="data"
+                  :cellClassName="cellClassName" :rowStyle="rowStyle" :rowClassName="rowClassName" @row="rowClick"
-                  :columns="columns"
+                  @row-double="rowDoubleClick" @contextmenu="contextmenu" v-model:selectedKeys="tableSelectedKeys"
-                  :indent-size="indentSize"
+                  v-model:selectedKey="tableSelectedKey">
-                  :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
+                <template v-for="(column, columnIndex) in columns" :key="columnIndex">
-                  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
+        <lay-page show-page show-skip show-limit :total="page.total" :limit="page.limit" v-model="page.current"
-          show-page
+          @jump="change">
-          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>

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>

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> 

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"
+                src="https://portrait.gitee.com/uploads/avatars/namespace/2319/6958819_pear-admin_1643085106.png!avatar100"
-                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"
                 style="background: transparent"
               ></lay-avatar>
             </a>