From 402fb53d8ba6c9de02fd2d967f9de1222647d283 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E4=BB=AA=E5=BC=8F?= <854085467@qq.com>
Date: Sun, 10 Oct 2021 05:48:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(table):=20=E5=88=9D=E6=AD=A5=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=20table=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/docs/zh-CN/components/table.md |  79 +++++++-
 src/css/layui.css                   |   7 +-
 src/module/table/index.vue          | 273 ++++++----------------------
 3 files changed, 135 insertions(+), 224 deletions(-)

diff --git a/docs/docs/zh-CN/components/table.md b/docs/docs/zh-CN/components/table.md
index 93db4081..b9a4f007 100644
--- a/docs/docs/zh-CN/components/table.md
+++ b/docs/docs/zh-CN/components/table.md
@@ -1,7 +1,10 @@
 ::: demo
 
 <template>
-  <lay-table></lay-table>
+  <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>
@@ -9,7 +12,81 @@ 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"
+      }
+    ]
+
+    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"
+      }
+    ]
+
+    const dataSource = [
+      {username:"root", password:"root", age:"18"},
+      {username:"woow", password:"woow", age:"20"}
+    ]
+
+    return {
+      columns,
+      dataSource
     }
   }
 }
diff --git a/src/css/layui.css b/src/css/layui.css
index ffd75fc6..2f31aa33 100644
--- a/src/css/layui.css
+++ b/src/css/layui.css
@@ -3650,11 +3650,16 @@ a cite {
 
 .layui-table-view .layui-table td,
 .layui-table-view .layui-table th {
-	padding: 5px 0;
+	padding: 5px 0px;
 	border-top: none;
 	border-left: none
 }
 
+.layui-table-view .layui-table td.layui-table-col-special, 
+.layui-table-view .layui-table th.layui-table-col-special {
+	padding: 5px 16px;
+}
+
 .layui-table-view .layui-table th.layui-unselect .layui-table-cell span {
 	cursor: pointer
 }
diff --git a/src/module/table/index.vue b/src/module/table/index.vue
index 2c84bf37..d5d6521c 100644
--- a/src/module/table/index.vue
+++ b/src/module/table/index.vue
@@ -1,10 +1,8 @@
 <template>
-  <div id="LAY_preview">
+  <div>
     <table class="layui-hide" id="test" lay-filter="test"></table>
     <div
       class="layui-form layui-border-box layui-table-view layui-table-view-1"
-      lay-filter="LAY-TABLE-FORM-DF-1"
-      lay-id="test"
     >
       <div class="layui-table-tool">
         <div class="layui-table-tool-self">
@@ -24,23 +22,12 @@
           <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
             <thead>
               <tr>
-                <th
-                  data-field="0"
-                  data-key="1-0-0"
-                  data-unresize="true"
-                  class="layui-table-col-special"
-                >
-                  <div
-                    class="
-                      layui-table-cell
-                      laytable-cell-1-0-0 laytable-cell-checkbox
-                    "
-                  >
+                <th class="layui-table-col-special">
+                  <div class="layui-table-cell laytable-cell-checkbox">
                     <input
                       type="checkbox"
                       name="layTableCheckbox"
                       lay-skin="primary"
-                      lay-filter="layTableAllChoose"
                     />
                     <div
                       class="layui-unselect layui-form-checkbox"
@@ -50,112 +37,12 @@
                     </div>
                   </div>
                 </th>
-                <th
-                  data-field="id"
-                  data-key="1-0-1"
-                  data-unresize="true"
-                  class="layui-unselect"
-                >
-                  <div class="layui-table-cell laytable-cell-1-0-1">
-                    <span>ID</span
-                    ><span class="layui-table-sort layui-inline"
-                      ><i
-                        class="layui-edge layui-table-sort-asc"
-                        title="升序"
-                      ></i
-                      ><i
-                        class="layui-edge layui-table-sort-desc"
-                        title="降序"
-                      ></i
-                    ></span>
-                  </div>
-                </th>
-                <th data-field="username" data-key="1-0-2" class="">
-                  <div class="layui-table-cell laytable-cell-1-0-2">
-                    <span>用户名</span>
-                  </div>
-                </th>
-                <th data-field="email" data-key="1-0-3" class="">
-                  <div class="layui-table-cell laytable-cell-1-0-3">
-                    <span>邮箱</span>
-                  </div>
-                </th>
-                <th
-                  data-field="experience"
-                  data-key="1-0-4"
-                  class="layui-unselect"
-                >
-                  <div class="layui-table-cell laytable-cell-1-0-4">
-                    <span>积分</span
-                    ><span class="layui-table-sort layui-inline"
-                      ><i
-                        class="layui-edge layui-table-sort-asc"
-                        title="升序"
-                      ></i
-                      ><i
-                        class="layui-edge layui-table-sort-desc"
-                        title="降序"
-                      ></i
-                    ></span>
-                  </div>
-                </th>
-                <th data-field="sex" data-key="1-0-5" class="layui-unselect">
-                  <div class="layui-table-cell laytable-cell-1-0-5">
-                    <span>性别</span
-                    ><span class="layui-table-sort layui-inline"
-                      ><i
-                        class="layui-edge layui-table-sort-asc"
-                        title="升序"
-                      ></i
-                      ><i
-                        class="layui-edge layui-table-sort-desc"
-                        title="降序"
-                      ></i
-                    ></span>
-                  </div>
-                </th>
-                <th data-field="logins" data-key="1-0-6" class="layui-unselect">
-                  <div class="layui-table-cell laytable-cell-1-0-6">
-                    <span>登入次数</span
-                    ><span class="layui-table-sort layui-inline"
-                      ><i
-                        class="layui-edge layui-table-sort-asc"
-                        title="升序"
-                      ></i
-                      ><i
-                        class="layui-edge layui-table-sort-desc"
-                        title="降序"
-                      ></i
-                    ></span>
-                  </div>
-                </th>
-                <th data-field="sign" data-key="1-0-7" class="">
-                  <div class="layui-table-cell laytable-cell-1-0-7">
-                    <span>签名</span>
-                  </div>
-                </th>
-                <th data-field="city" data-key="1-0-8" class="">
-                  <div class="layui-table-cell laytable-cell-1-0-8">
-                    <span>城市</span>
-                  </div>
-                </th>
-                <th data-field="ip" data-key="1-0-9" class="">
-                  <div class="layui-table-cell laytable-cell-1-0-9">
-                    <span>IP</span>
-                  </div>
-                </th>
-                <th data-field="joinTime" data-key="1-0-10" class="">
-                  <div class="layui-table-cell laytable-cell-1-0-10">
-                    <span>加入时间</span>
-                  </div>
-                </th>
-                <th
-                  data-field="11"
-                  data-key="1-0-11"
-                  class="layui-table-col-special"
-                >
-                  <div class="layui-table-cell laytable-cell-1-0-11">
-                    <span>操作</span>
+                <th v-for="column in columns" :key="column">
+                  <div
+                    class="layui-table-cell"
+                    :style="{ width: column.width }"
+                  >
+                    <span>{{ column.title }}</span>
                   </div>
                 </th>
               </tr>
@@ -165,119 +52,61 @@
         <div class="layui-table-body layui-table-main">
           <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
             <tbody>
-              <tr data-index="0" class="">
-                <td
-                  data-field="0"
-                  data-key="1-0-0"
-                  class="layui-table-col-special"
-                >
-                  <div
-                    class="
-                      layui-table-cell
-                      laytable-cell-1-0-0 laytable-cell-checkbox
-                    "
-                  >
-                    <input
-                      type="checkbox"
-                      name="layTableCheckbox"
-                      lay-skin="primary"
-                    />
-                    <div
-                      class="layui-unselect layui-form-checkbox"
-                      lay-skin="primary"
-                    >
-                      <i class="layui-icon layui-icon-ok"></i>
+              <template v-for="data in dataSource" :key="data">
+                <tr>
+                  <td class="layui-table-col-special">
+                    <div class="layui-table-cell laytable-cell-checkbox">
+                      <input
+                        type="checkbox"
+                        name="layTableCheckbox"
+                        lay-skin="primary"
+                      />
+                      <div
+                        class="layui-unselect layui-form-checkbox"
+                        lay-skin="primary"
+                      >
+                        <i class="layui-icon layui-icon-ok"></i>
+                      </div>
                     </div>
-                  </div>
-                </td>
-                <td data-field="id" data-key="1-0-1" class="">
-                  <div class="layui-table-cell laytable-cell-1-0-1">10001</div>
-                </td>
-                <td
-                  data-field="username"
-                  data-key="1-0-2"
-                  data-edit="text"
-                  class=""
-                >
-                  <div class="layui-table-cell laytable-cell-1-0-2">杜甫</div>
-                </td>
-                <td
-                  data-field="email"
-                  data-key="1-0-3"
-                  data-edit="text"
-                  data-content="test@email.com"
-                  class=""
-                >
-                  <div class="layui-table-cell laytable-cell-1-0-3">
-                    <em>test@email.com</em>
-                  </div>
-                </td>
-                <td data-field="experience" data-key="1-0-4" class="">
-                  <div class="layui-table-cell laytable-cell-1-0-4">116</div>
-                </td>
-                <td data-field="sex" data-key="1-0-5" data-edit="text" class="">
-                  <div class="layui-table-cell laytable-cell-1-0-5">男</div>
-                </td>
-                <td data-field="logins" data-key="1-0-6" class="">
-                  <div class="layui-table-cell laytable-cell-1-0-6">108</div>
-                </td>
-                <td data-field="sign" data-key="1-0-7" class="">
-                  <div class="layui-table-cell laytable-cell-1-0-7">
-                    点击此处，显示更多。当内容超出时，点击单元格会自动显示更多内容。
-                  </div>
-                </td>
-                <td data-field="city" data-key="1-0-8" class="">
-                  <div class="layui-table-cell laytable-cell-1-0-8">
-                    浙江杭州
-                  </div>
-                </td>
-                <td data-field="ip" data-key="1-0-9" class="">
-                  <div class="layui-table-cell laytable-cell-1-0-9">
-                    192.168.0.8
-                  </div>
-                </td>
-                <td data-field="joinTime" data-key="1-0-10" class="">
-                  <div class="layui-table-cell laytable-cell-1-0-10">
-                    2016-10-14
-                  </div>
-                </td>
-                <td
-                  data-field="11"
-                  data-key="1-0-11"
-                  data-off="true"
-                  class="layui-table-col-special"
-                >
-                  <div class="layui-table-cell laytable-cell-1-0-11">
-                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
-                    <a
-                      class="layui-btn layui-btn-danger layui-btn-xs"
-                      lay-event="del"
-                      >删除</a
-                    >
-                  </div>
-                </td>
-              </tr>
+                  </td>
+
+                  <template v-for="(value, key, index) in data" :key="index">
+                    <template v-for="column in columns" :key="column">
+                      <td v-if="column.key == key">
+                        <div
+                          :style="{ width: column.width }"
+                          style="padding: 0px 16px"
+                        >
+                          <span v-if="column.slot">
+                            <slot :name="column.slot" :data="data"></slot>
+                          </span>
+                          <span v-else> {{ value }} </span>
+                        </div>
+                      </td>
+                    </template>
+                  </template>
+                </tr>
+              </template>
             </tbody>
           </table>
         </div>
       </div>
-    </div>
-    <div class="layui-table-page">
-      <div id="layui-table-page1">
-           <lay-page total="100" limit="10" showPage showLimit showSkip></lay-page>
+      <div class="layui-table-page">
+        <lay-page total="100" limit="10" showPage showLimit showSkip></lay-page>
       </div>
     </div>
   </div>
 </template>
 <script setup name="LayTable" lang="ts">
-import { defineProps, defineEmits } from 'vue'
+import { defineProps, useSlots } from 'vue'
 
 const props =
   defineProps<{
     columns?: Object[]
-    data?: Object[]
+    dataSource?: Object[]
+    skin?: string
   }>()
-</script>
-<style>
 
-</style>
+const slot = useSlots()
+const slots = slot.default && slot.default()
+</script>
\ No newline at end of file