feat(table): columns 配置 新增 customSlot 自定义插槽

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

@@ -4,6 +4,10 @@
   <lay-table :columns="columns" :dataSource="dataSource">
     <template v-slot:username="{ data }"> {{data.username}} </template>
     <template v-slot:password="{ data }"> {{data.password}} </template>
+    <template v-slot:operator="{ data }">
+      <lay-button type="primary">修改</lay-button>
+      <lay-button type="primary">删除</lay-button>
+    </template>
   </lay-table>
 </template>
 
@@ -28,54 +32,11 @@ export default {
         title:"年龄",
         width: "180px",
         key:"age"
-      }
-    ]
-
-    const dataSource = [
-      {username:"root", password:"root", age:"18"},
-      {username:"woow", password:"woow", age:"20"}
-    ]
-
-    return {
-      columns,
-      dataSource
-    }
-  }
-}
-</script>
-
-:::
-
-::: demo
-
-<template>
-  <lay-table :columns="columns" :dataSource="dataSource">
-    <template v-slot:username="{ data }"> {{data.username}} </template>
-    <template v-slot:password="{ data }"> {{data.password}} </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"
       }
     ]
 

src/css/layui.css

@@ -3635,7 +3635,6 @@ a cite {
 
 .layui-table-view .layui-table {
 	position: relative;
-	width: auto;
 	margin: 0;
 	border-collapse: separate
 }

src/module/table/index.vue

@@ -70,8 +70,24 @@
                     </div>
                   </td>
 
-                  <template v-for="(value, key, index) in data" :key="index">
                   <template v-for="column in columns" :key="column">
+                  
+                    <template v-if="column.customSlot">
+                      <td>
+                        <div
+                          :style="{ width: column.width }"
+                          style="padding: 0px 16px"
+                        >
+                          <slot :name="column.customSlot" :data="data"></slot>
+                        </div>
+                      </td>
+                    </template>
+                    
+                    <template
+                      v-else
+                      v-for="(value, key, index) in data"
+                      :key="index"
+                    >
                       <td v-if="column.key == key">
                         <div
                           :style="{ width: column.width }"
@@ -84,6 +100,7 @@
                         </div>
                       </td>
                     </template>
+
                   </template>
                 </tr>
               </template>