diff --git a/packages/yike-design-demo/src/examples/table/doc.md b/packages/yike-design-demo/src/examples/table/doc.md
index 5eb7a346..76e26c7f 100644
--- a/packages/yike-design-demo/src/examples/table/doc.md
+++ b/packages/yike-design-demo/src/examples/table/doc.md
@@ -24,6 +24,12 @@
:::
+:::snippet
+自定义内容
+通过设置 slot 来自定义内容。
+
+:::
+
### 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
new file mode 100644
index 00000000..c6be672a
--- /dev/null
+++ b/packages/yike-design-demo/src/examples/table/table-tbody.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+ |
+
+ {{ item.email }}
+ |
+
+ {{ item.bir }}
+ |
+
+ {{ item.desc }}
+ |
+
+ 删除
+ |
+
+
+
+
+
diff --git a/packages/yike-design-ui/components/table/src/column.ts b/packages/yike-design-ui/components/table/src/column.ts
index c209d2b1..baa35c93 100644
--- 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
index a12771a2..8741956f 100644
--- a/packages/yike-design-ui/components/table/src/table.vue
+++ b/packages/yike-design-ui/components/table/src/table.vue
@@ -2,7 +2,8 @@
diff --git a/packages/yike-design-ui/components/table/style/index.less b/packages/yike-design-ui/components/table/style/index.less
index 66039fed..1e9837f7 100644
--- 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;
}