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 @@ + + 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; }