✨(component): 新增 table 组件 loading 属性, 数据加载过渡

package/component/src/component/input/index.vue

@@ -10,7 +10,7 @@ import { LayIcon } from "@layui/icons-vue";
 import { computed, ref, useSlots, watch } from "vue";
 import { useI18n } from "../../language";
 import PasswordIcon from "./svg/Password.vue";
-import UnPasswordIcon from "./svg/unPassword.vue"
+import UnPasswordIcon from "./svg/unPassword.vue";
 
 export interface LayInputProps {
   name?: string;
@@ -159,7 +159,11 @@ const showPassword = () => {
           class="layui-input-suffix-icon"
         ></lay-icon>
       </span>
-      <span class="layui-input-password" @click="showPassword" v-if="password && hasContent">
+      <span
+        class="layui-input-password"
+        @click="showPassword"
+        v-if="password && hasContent"
+      >
         <password-icon v-if="isPassword"></password-icon>
         <un-password-icon v-else></un-password-icon>
       </span>

package/component/src/component/input/svg/Password.vue

@@ -1,3 +1,19 @@
 <template>
-    <svg focusable="false" class="" data-icon="eye-invisible" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"></path><path d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"></path></svg>
+  <svg
+    focusable="false"
+    class=""
+    data-icon="eye-invisible"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    aria-hidden="true"
+    viewBox="64 64 896 896"
+  >
+    <path
+      d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
+    ></path>
+    <path
+      d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
+    ></path>
+  </svg>
 </template>

package/component/src/component/input/svg/unPassword.vue

@@ -1,3 +1,16 @@
 <template>
-    <svg focusable="false" class="" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg>
+  <svg
+    focusable="false"
+    class=""
+    data-icon="eye"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    aria-hidden="true"
+    viewBox="64 64 896 896"
+  >
+    <path
+      d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+    ></path>
+  </svg>
 </template>

package/component/src/component/table/index.less

@@ -577,3 +577,13 @@
 .layui-table-cell-expand {
   word-break: break-all;
 }
+
+.layui-table-loading {
+  height: 80px;
+  text-align: center;
+  line-height: 70px;
+}
+
+.layui-table-loading .layui-icon {
+  font-size: 26px;
+}

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

@@ -49,6 +49,7 @@ export interface LayTableProps {
   spanMethod?: Function;
   defaultExpandAll?: boolean;
   expandKeys?: Recordable[];
+  loading?: boolean;
 }
 
 const props = withDefaults(defineProps<LayTableProps>(), {
@@ -69,6 +70,7 @@ const props = withDefaults(defineProps<LayTableProps>(), {
   defaultExpandAll: false,
   spanMethod: () => {},
   expandKeys: () => [],
+  loading: false
 });
 
 const tableId = uuidv4();
@@ -708,8 +710,8 @@ const renderTotalRowCell = (column: any) => {
           ref="tableBody"
         >
           <table
-            v-if="tableDataSource.length > 0"
             class="layui-table"
+            v-if="tableDataSource.length > 0 && loading == false"
             :class="{ 'layui-table-even': props.even }"
             :lay-size="size"
             :lay-skin="skin"
@@ -775,7 +777,12 @@ const renderTotalRowCell = (column: any) => {
               </tr>
             </tbody>
           </table>
-          <lay-empty v-else></lay-empty>
+          <lay-empty v-if="tableDataSource.length == 0 && loading == false"></lay-empty>
+          <template v-if="loading == true">
+            <div class="layui-table-loading">
+              <i class="layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
+            </div> 
+          </template>
         </div>
       </div>
       <div v-if="page" class="layui-table-page">

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

@@ -1223,6 +1223,77 @@ export default {
 
 :::
 
+::: title 复杂表头
+:::
+
+::: demo 通过 `span-method` 属性, 自定义行列合并的逻辑。
+
+<template>
+  <lay-button @click="loadData">加载数据</lay-button>
+  <lay-table :columns="columns30" :data-source="dataSource30" :loading="loading"></lay-table>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const loading = ref(false);
+
+    const columns30 = [
+      {
+        title:"名称",
+        width:"200px",
+        key:"username"
+      },{
+        title:"地址",
+        children: [
+          { title: "省", key: "province", width: "300px" },
+          { title: "市", key: "city", width: "300px" },
+          { title: "区", key: "area", width: "300px" },
+        ]
+      },{
+        title:"性别",
+        key:"sex"
+      },{
+        title:"年龄",
+        width: "300px",
+        key:"age"
+      },{
+        title:"备注",
+        width: "180px",
+        key:"remark",
+        ellipsisTooltip: true
+      }
+    ]
+
+    const dataSource30 = ref([])
+
+    const loadData = () => {
+      loading.value = true;
+      setTimeout(() => {
+      dataSource30.value = [
+        {id:"1",username:"就眠儀式",province:"山东",city:"济南",area: "高新区", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
+        {id:"2",username:"就眠儀式",province:"山东",city:"济南",area: "高新区", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
+        {id:"3",username:"就眠儀式",province:"山东",city:"济南",area: "高新区", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
+        {id:"4",username:"就眠儀式",province:"山东",city:"济南",area: "高新区", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
+        {id:"5",username:"就眠儀式",province:"山东",city:"济南",area: "高新区", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '}
+      ];
+      loading.value = false;
+      },50000000)
+    }
+
+    return {
+      columns30,
+      dataSource30,
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 完整表格
 :::