✨(table): 新增 table 空数据状态

package/component/src/component/cascader/index.vue

@@ -1,14 +1,14 @@
 <template>
   <lay-dropdown
     class="layui-cascader"
-    :class="{'layui-cascader-opend':openState}"
+    :class="{ 'layui-cascader-opend': openState }"
     ref="dropdownRef"
     :autoFitMinWidth="false"
     :updateAtScroll="true"
     :disabled="dropDownDisabled"
     :size="size"
-    @open="openState=true"
-    @hide="openState=false"
+    @open="openState = true"
+    @hide="openState = false"
   >
     <lay-input
       v-model="displayValue"
@@ -88,7 +88,7 @@ const props = withDefaults(defineProps<LayCascaderProps>(), {
   placeholder: "",
   onlyLastLevel: false,
   allowClear: false,
-  size:'md',
+  size: "md",
   replaceFields: () => {
     return {
       label: "label",
@@ -257,7 +257,7 @@ const selectBar = (item: any, selectIndex: number, parentIndex: number) => {
   }
 };
 
-const displayValue = ref<string | number >('');
+const displayValue = ref<string | number>("");
 const slots = useSlots();
 const dropdownRef = ref();
 const dropDownDisabled = ref(false);
@@ -280,5 +280,5 @@ const onClear = () => {
   }, 0);
 };
 
-const openState=ref(false)
-</script>
+const openState = ref(false);
+</script>

package/component/src/component/datePicker/index.vue

@@ -5,7 +5,7 @@
       :disabled="disabled"
       :autoFitMinWidth="false"
       class="layui-date-picker"
-      :class="{'layui-date-range-picker':range}"
+      :class="{ 'layui-date-range-picker': range }"
       :size="size"
     >
       <lay-input
@@ -148,7 +148,7 @@ const props = withDefaults(defineProps<LayDatePickerProps>(), {
   rangeSeparator: "至",
   readonly: false,
   allowClear: true,
-  size:'md',
+  size: "md",
 });
 
 const dropdownRef = ref(null);

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

@@ -33,7 +33,7 @@ const props = withDefaults(defineProps<LayInputProps>(), {
   autofocus: false,
   password: false,
   modelValue: "",
-  size:'md',
+  size: "md",
 });
 
 interface InputEmits {

package/component/src/component/select/index.vue

@@ -31,7 +31,7 @@ export interface LaySelectProps {
     keyword: string;
   }[];
   size?: "lg" | "md" | "sm" | "xs";
-  allowClear:boolean;
+  allowClear: boolean;
 }
 
 const selectRef = shallowRef<undefined | HTMLElement>(undefined);
@@ -48,8 +48,8 @@ const props = withDefaults(defineProps<LaySelectProps>(), {
   showEmpty: true,
   multiple: false,
   create: false,
-  size:'md',
-  allowClear:true
+  size: "md",
+  allowClear: true,
 });
 
 const openState = ref(false);
@@ -166,9 +166,9 @@ const selectItemPush = function (p: SelectItem) {
   }
 };
 
-const clear=()=>{
-  emit('update:modelValue',props.multiple?[]:'');
-}
+const clear = () => {
+  emit("update:modelValue", props.multiple ? [] : "");
+};
 
 provide("selectItemHandle", selectItemHandle);
 provide("selectItemPush", selectItemPush);
@@ -180,8 +180,11 @@ provide("keyword", txt);
   <div
     ref="selectRef"
     class="layui-unselect layui-form-select"
-    :class="{ 'layui-form-selected': openState,'layui-form-select-multiple':multiple }"
-    :size='size'
+    :class="{
+      'layui-form-selected': openState,
+      'layui-form-select-multiple': multiple,
+    }"
+    :size="size"
   >
     <div class="layui-select-title" @click="open">
       <input
@@ -205,8 +208,18 @@ provide("keyword", txt);
         ]"
       />
       <span class="layui-input-icon-area">
-        <i :class="['layui-icon layui-icon-down', { 'layui-disabled': disabled }]" :style="{transform:`rotate(${openState?180:0}deg)`}"></i>
-        <i class="layui-icon layui-icon-close-fill" v-if="(value||selectItem.label?.length)&&allowClear" @click.stop="clear"></i>
+        <i
+          :class="[
+            'layui-icon layui-icon-down',
+            { 'layui-disabled': disabled },
+          ]"
+          :style="{ transform: `rotate(${openState ? 180 : 0}deg)` }"
+        ></i>
+        <i
+          class="layui-icon layui-icon-close-fill"
+          v-if="(value || selectItem.label?.length) && allowClear"
+          @click.stop="clear"
+        ></i>
       </span>
       <!-- 多选 -->
       <div

package/component/src/component/table/TableRow.vue

@@ -8,6 +8,7 @@ export default {
 import { Recordable } from "../../types";
 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";
@@ -193,7 +194,6 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
     <template v-for="(column, columnIndex) in columns" :key="columnIndex">
       <!-- 展示否 -->
       <template v-if="tableColumnKeys.includes(column.key)">
-
         <template v-if="column.type == 'radio'">
           <td
             class="layui-table-cell layui-table-cell-radio"
@@ -237,10 +237,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
               @click="handleExpand"
             ></lay-icon>
 
-            <lay-radio
-              v-model="tableSelectedKey"
-              :value="data[id]"
-            />
+            <lay-radio v-model="tableSelectedKey" :value="data[id]" />
           </td>
         </template>
 

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

@@ -15,7 +15,7 @@ import {
   onUpdated,
   StyleValue,
   WritableComputedRef,
-computed,
+  computed,
 } from "vue";
 import { v4 as uuidv4 } from "../../utils/guidUtil";
 import { Recordable } from "../../types";
@@ -23,6 +23,7 @@ import { LayIcon } from "@layui/icons-vue";
 import LayCheckbox from "../checkbox/index.vue";
 import LayDropdown from "../dropdown/index.vue";
 import LayPage from "../page/index.vue";
+import LayEmpty from "../empty/index.vue";
 import TableRow from "./TableRow.vue";
 
 export interface LayTableProps {
@@ -395,7 +396,9 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
                     :class="[
                       column.fixed ? `layui-table-fixed-${column.fixed}` : '',
                       renderFixedClassName(column, columnIndex),
-                      column.type == 'checkbox' ? 'layui-table-cell-checkbox' : '',
+                      column.type == 'checkbox'
+                        ? 'layui-table-cell-checkbox'
+                        : '',
                       column.type == 'radio' ? 'layui-table-cell-radio' : '',
                       column.type == 'number' ? 'layui-table-cell-number' : '',
                     ]"
@@ -462,6 +465,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
           ref="tableBody"
         >
           <table
+            v-if="tableDataSource.length > 0"
             class="layui-table"
             :class="{ 'layui-table-even': props.even }"
             :lay-size="size"
@@ -500,7 +504,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
                   @row-double="rowDoubleClick"
                   @contextmenu="contextmenu"
                   v-model:selectedKeys="tableSelectedKeys"
-                  v-model:selectedKey="tableSelectedKey" 
+                  v-model:selectedKey="tableSelectedKey"
                 >
                   <template v-for="name in slotsData" #[name]="{ data }">
                     <slot :name="name" :data="data"></slot>
@@ -512,6 +516,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
               </template>
             </tbody>
           </table>
+          <lay-empty v-else></lay-empty>
         </div>
       </div>
       <div v-if="page" class="layui-table-page">

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

@@ -796,6 +796,58 @@ export default {
 
 :::
 
+::: title 暂无数据
+:::
+
+::: demo 通过 `columns` 配置 `type:'radio'` 开启单选列。
+
+<template>
+  <lay-table :columns="columns25" :dataSource="dataSource25"></lay-table>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const columns25 = [
+      {
+        title:"账户",
+        width:"200px",
+        key:"username"
+      },{
+        title:"密码",
+        width: "300px",
+        key:"password"
+      },{
+        title:"性别",
+        key:"sex"
+      },{
+        title:"年龄",
+        width: "300px",
+        key:"age"
+      },{
+        title:"备注",
+        width: "180px",
+        key:"remark",
+        ellipsisTooltip: true
+      }
+    ]
+
+    const dataSource25 = [
+    ]
+
+    return {
+      columns25,
+      dataSource25,
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 刷新数据
 :::