fix(table): 简单增加内容插槽

ecaps1038 · Mar 24, 2024 · a880f3d · a880f3d
1 parent 9722a20
commit a880f3d
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 5 deletions.
diff --git a/packages/yike-design-demo/src/examples/table/doc.md b/packages/yike-design-demo/src/examples/table/doc.md
@@ -24,6 +24,12 @@
 <TableCustomHeader/>
 :::
 
+:::snippet
+自定义内容
+通过设置 slot 来自定义内容。
+<TableTbody/>
+:::
+
 ### API
 
 #### Table 属性
@@ -50,9 +56,10 @@
 | formatter | 用来格式化内容     | function(row, column, cellValue, index) | —       |
 | align     | 对齐方式           | left / center / right                   | left    |
 
-#### Table-column 插槽
+#### Table 插槽
 
 | 参数    | 描述                                               |
 | ------- | -------------------------------------------------- |
 | default | 自定义列的内容 作用域参数为 { row, column, index } |
 | header  | 自定义表头的内容， 作用域参数为 { column, index }  |
+| tbody   | 自定义表的内容                                     |
diff --git a/packages/yike-design-demo/src/examples/table/table-tbody.vue b/packages/yike-design-demo/src/examples/table/table-tbody.vue
@@ -0,0 +1,43 @@
+<template>
+  <yk-table>
+    <yk-table-column property="name" label="用户名"></yk-table-column>
+    <yk-table-column property="email" label="邮箱"></yk-table-column>
+    <yk-table-column property="bir" label="生日"></yk-table-column>
+    <yk-table-column property="desc" label="简介"></yk-table-column>
+    <yk-table-column
+      property="manage"
+      label="操作"
+      align="right"
+    ></yk-table-column>
+    <template #tbody>
+      <tr v-for="(item, index) in dataList" :key="index" class="yk-table__row">
+        <td class="yk-table__cell">
+          <yk-input v-model="item.name" />
+        </td>
+        <td class="yk-table__cell">
+          {{ item.email }}
+        </td>
+        <td class="yk-table__cell">
+          {{ item.bir }}
+        </td>
+        <td class="yk-table__cell">
+          {{ item.desc }}
+        </td>
+        <td class="yk-table__cell text-right">
+          <yk-text type="primary" style="cursor: pointer">删除</yk-text>
+        </td>
+      </tr>
+    </template>
+  </yk-table>
+</template>
+<script setup lang="ts">
+const dataList = []
+for (let index = 0; index < 5; index++) {
+  dataList.push({
+    name: '浩哥看沟通',
+    email: 'xigeotmete@qq.com',
+    bir: '1994.03.12',
+    desc: '这句话不知道 当讲不当讲，反正就是想讲一讲的',
+  })
+}
+</script>
diff --git a/packages/yike-design-ui/components/table/src/column.ts b/packages/yike-design-ui/components/table/src/column.ts
@@ -96,7 +96,7 @@ export default defineComponent({
           } else {
             children = column.label;
           }
-          return h('div', { class: 'cell' }, [
+          return h('div', { class: 'cell text-' + props.align }, [
             renderHeader ? renderHeader({ column, index }) : children,
           ]);
         },

diff --git a/packages/yike-design-ui/components/table/src/table.vue b/packages/yike-design-ui/components/table/src/table.vue
@@ -2,7 +2,8 @@
   <div :class="bem()">
     <table>
       <TableHeader />
-      <TableBody />
+      <TableBody v-if="$props.data" />
+      <slot name="tbody" />
     </table>
     <div v-show="false" ref="hiddenColumns">
       <slot />

diff --git a/packages/yike-design-ui/components/table/style/index.less b/packages/yike-design-ui/components/table/style/index.less
@@ -2,6 +2,7 @@
 
 .yk-table {
   overflow-x: auto;
+
   > table {
     position: relative;
     overflow: hidden;
@@ -10,6 +11,7 @@
     height: fit-content;
     box-sizing: border-box;
     border-spacing: 0;
+
     .td {
       padding: @space-m @space-xl;
     }
@@ -18,10 +20,12 @@
   th {
     padding: 0 @space-xl;
     background-color: @bg-color-s;
+
     .cell {
       font-weight: 600;
     }
   }
+
   &__cell {
     position: relative;
     z-index: 1;
@@ -34,9 +38,8 @@
     box-sizing: border-box;
     vertical-align: middle;
     .font-s();
+
     .cell {
-      display: flex;
-      align-items: center;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: normal;
@@ -48,9 +51,11 @@
 
   &__row {
     background-color: @bg-color-l;
+
     &:hover {
       background-color: @bg-color-m;
     }
+
     .yk-table__cell {
       padding: 0 @space-xl;
     }
@@ -59,6 +64,7 @@
   .text-center {
     text-align: center;
   }
+
   .text-right {
     text-align: right;
   }