perf(table): 新增 size 配置, 支持不同尺寸

docs/docs/zh-CN/components/container.md

@@ -68,6 +68,6 @@ export default {
 ::: field 容器属性
 :::
 
-| Name   | Description | Accepted Values   |
+| Name   | Description | Accepted Values  |
 | ----- | ------ | -------------- |
 | fluid | 流模式 | `true` `false` |

docs/docs/zh-CN/components/table.md

@@ -1,3 +1,6 @@
+::: field 基础使用
+::: 
+
 ::: demo
 
 <template>
@@ -55,6 +58,69 @@ export default {
 
 :::
 
+::: field 不同尺寸
+::: 
+
+::: demo
+
+<template>
+  <lay-table :columns="columns" :dataSource="dataSource" size="lg">
+    <template v-slot:username="{ data }"> {{data.username}} </template>
+    <template v-slot:password="{ data }"> {{data.password}} </template>
+    <template v-slot:operator="{ data }">
+      <lay-button >修改</lay-button>
+      <lay-button type="primary">删除</lay-button>
+    </template>
+  </lay-table>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const columns = [
+      {
+        title:"账户",
+        width:"200px",
+        slot:"username",
+        key:"username"
+      },{
+        title:"密码",
+        width: "180px",
+        slot:"password",
+        key:"password"
+      },{
+        title:"年龄",
+        width: "180px",
+        key:"age"
+      },{
+        title:"操作",
+        width: "180px",
+        customSlot:"operator",
+        key:"operator"
+      }
+    ]
+
+    const dataSource = [
+      {username:"root", password:"root", age:"18"},
+      {username:"woow", password:"woow", age:"20"}
+    ]
+
+    return {
+      columns,
+      dataSource
+    }
+  }
+}
+</script>
+
+:::
+
+::: field 开启分页
+::: 
+
 ::: demo
 
 <template>
@@ -123,6 +189,9 @@ export default {
 
 :::
 
+::: field 完整表格
+::: 
+
 ::: demo
 
 <template>
@@ -202,7 +271,8 @@ export default {
 | checkbox        | 开启复现框  | --  |
 | id              | 主键       | --  |
 | selectedKeys ( v-model )    | 选中项     | --  |
-| default-toolbar | 开启工具栏 | --  |
+| default-toolbar | 开启工具栏 | `lg` `md` `sm` |
+| size | 尺寸 | --  |
 
 ::: field table slots
 

src/module/collapseItem/index.vue

@@ -15,19 +15,20 @@
 <script setup name="LayCollapseItem" lang="ts">
 import { defineProps, inject, ref } from 'vue'
 
-const props = defineProps<{
+const props =
-  id: string
+  defineProps<{
-  title: string
+    id: string
-}>()
+    title: string
+  }>()
 
-const openKeys = inject("openKeys") as String[]
+const openKeys = inject('openKeys') as String[]
 
 const isShow = ref(openKeys.includes(props.id))
 
 const showHandle = function () {
   isShow.value = !isShow.value
-  if(openKeys.indexOf(props.id) != -1) {
+  if (openKeys.indexOf(props.id) != -1) {
-    openKeys.splice(openKeys.indexOf(props.id),1)
+    openKeys.splice(openKeys.indexOf(props.id), 1)
   } else {
     openKeys.push(props.id)
   }

src/module/table/index.vue

@@ -21,7 +21,7 @@
       </div>
       <div class="layui-table-box">
         <div class="layui-table-header">
-          <table cellspacing="0" cellpadding="0" border="0" class="layui-table" lay-size="sm">
+          <table class="layui-table" :lay-size="size">
             <thead>
               <tr>
                 <th v-if="checkbox" class="layui-table-col-special">
@@ -47,7 +47,7 @@
           </table>
         </div>
         <div class="layui-table-body layui-table-main">
-          <table cellspacing="0" cellpadding="0" border="0" class="layui-table" lay-size="sm">
+          <table class="layui-table" :lay-size="size">
             <tbody>
               <template v-for="data in dataSource" :key="data">
                 <tr>
@@ -64,9 +64,7 @@
                   <template v-for="column in columns" :key="column">
                     <template v-if="column.customSlot">
                       <td class="layui-table-cell">
-                        <div
+                        <div :style="{ width: column.width }">
-                          :style="{ width: column.width }"
-                        >
                           <slot :name="column.customSlot" :data="data" />
                         </div>
                       </td>
@@ -78,9 +76,7 @@
                       :key="index"
                     >
                       <td class="layui-table-cell" v-if="column.key == key">
-                        <div
+                        <div :style="{ width: column.width }">
-                          :style="{ width: column.width }"
-                        >
                           <span v-if="column.slot">
                             <slot :name="column.slot" :data="data" />
                           </span>
@@ -103,12 +99,25 @@
           show-limit
           show-skip
           @jump="change"
-        />
+        >
+          <template v-slot:prev
+            ><lay-icon type="layui-icon-left"></lay-icon
+          ></template>
+          <template v-slot:next
+            ><lay-icon type="layui-icon-right"></lay-icon
+          ></template>
+        </lay-page>
       </div>
     </div>
   </div>
 </template>
-<script setup name="LayTable"></script>
+
+<script lang="ts">
+export default {
+  name: 'LayTable',
+}
+</script>
+
 <script setup lang="ts">
 import tableItemCheckbox from './component/checkbox.vue'
 import {
@@ -125,6 +134,7 @@ const props = withDefaults(
   defineProps<{
     id?: string
     skin?: string
+    size?: string
     page?: Recordable
     checkbox?: boolean
     columns?: Recordable[]
@@ -139,7 +149,8 @@ const props = withDefaults(
     },
     selectedKeys: function () {
       return []
-    }
+    },
+    size: 'md',
   }
 )
 

src/use/index.ts

@@ -1 +1 @@
-import './useClickOutside.ts'
+import './useClickOutside.ts'