diff --git a/packages/devui-vue/devui/table/src/components/body/body.scss b/packages/devui-vue/devui/table/src/components/body/body.scss
index b11c2bb875..ac6acb04fb 100644
--- a/packages/devui-vue/devui/table/src/components/body/body.scss
+++ b/packages/devui-vue/devui/table/src/components/body/body.scss
@@ -3,10 +3,8 @@
.devui-table {
&__tbody {
tr {
- font-size: $devui-font-size-card-title;
+ font-size: $devui-font-size;
color: $devui-text;
- border: none;
- border-bottom: 1px solid $devui-dividing-line;
background-color: $devui-base-bg;
&.hover-enabled:hover {
@@ -14,8 +12,13 @@
}
td {
- padding: 10px;
+ background-clip: padding-box;
+ vertical-align: middle;
+ word-wrap: break-word;
+ word-break: normal;
+ line-height: 24px;
border: none;
+ border-bottom: 1px solid $devui-dividing-line;
}
}
}
diff --git a/packages/devui-vue/devui/table/src/components/body/body.tsx b/packages/devui-vue/devui/table/src/components/body/body.tsx
index 412b6c2711..46460c58d2 100644
--- a/packages/devui-vue/devui/table/src/components/body/body.tsx
+++ b/packages/devui-vue/devui/table/src/components/body/body.tsx
@@ -18,7 +18,7 @@ export default defineComponent({
const renderCheckbox = (index: number) =>
table.props.checkable ? (
-
+ |
|
) : null;
diff --git a/packages/devui-vue/devui/table/src/components/header/header.scss b/packages/devui-vue/devui/table/src/components/header/header.scss
index 21354df112..cbd490115e 100644
--- a/packages/devui-vue/devui/table/src/components/header/header.scss
+++ b/packages/devui-vue/devui/table/src/components/header/header.scss
@@ -6,14 +6,12 @@
font-size: $devui-font-size-card-title;
color: $devui-text;
font-weight: 700;
- border: none;
- border-bottom: 1px solid $devui-line;
background-color: $devui-base-bg;
th {
text-align: left;
- padding: 0;
border: none;
+ border-bottom: 1px solid $devui-line;
}
}
diff --git a/packages/devui-vue/devui/table/src/components/header/header.tsx b/packages/devui-vue/devui/table/src/components/header/header.tsx
index 4bcfeaa7b1..f544c240ca 100644
--- a/packages/devui-vue/devui/table/src/components/header/header.tsx
+++ b/packages/devui-vue/devui/table/src/components/header/header.tsx
@@ -16,8 +16,8 @@ export default defineComponent({
const thAttrs = computed(() => (isFixedLeft.value ? { class: `${ns.m('sticky-cell')} left`, style: 'left:0;' } : null));
const checkbox = computed(() =>
table.props.checkable ? (
-
-
+ |
+
|
) : null
);
diff --git a/packages/devui-vue/devui/table/src/composable/use-table.ts b/packages/devui-vue/devui/table/src/composable/use-table.ts
index c9b172a4b4..ac818eebf4 100644
--- a/packages/devui-vue/devui/table/src/composable/use-table.ts
+++ b/packages/devui-vue/devui/table/src/composable/use-table.ts
@@ -15,6 +15,7 @@ export function useTable(props: TablePropsTypes): TableConfig {
[ns.m('striped')]: props.striped,
[ns.m('header-bg')]: props.headerBg,
[ns.m('layout-auto')]: props.tableLayout === 'auto',
+ [ns.m(`${props.size}`)]: true,
}));
const style: ComputedRef = computed(() => ({
maxHeight: props.maxHeight,
diff --git a/packages/devui-vue/devui/table/src/table-types.ts b/packages/devui-vue/devui/table/src/table-types.ts
index 837d574bc2..cae7f97b81 100644
--- a/packages/devui-vue/devui/table/src/table-types.ts
+++ b/packages/devui-vue/devui/table/src/table-types.ts
@@ -40,6 +40,7 @@ export const TableProps = {
validator(value: string): boolean {
return value === 'sm' || value === 'md' || value === 'lg';
},
+ default: 'sm',
},
rowHoveredHighlight: {
type: Boolean,
@@ -51,7 +52,7 @@ export const TableProps = {
},
checkable: {
type: Boolean,
- default: true,
+ default: false,
},
tableLayout: {
type: String as PropType<'fixed' | 'auto'>,
diff --git a/packages/devui-vue/devui/table/src/table.scss b/packages/devui-vue/devui/table/src/table.scss
index c0f24c0953..185bd0e08d 100644
--- a/packages/devui-vue/devui/table/src/table.scss
+++ b/packages/devui-vue/devui/table/src/table.scss
@@ -10,6 +10,7 @@
table-layout: fixed;
width: 100%;
border-spacing: 0;
+ border-collapse: separate;
border: none;
margin: 0;
padding: 0;
@@ -42,4 +43,38 @@
&--layout-auto {
table-layout: auto;
}
+
+ &--sm {
+ tbody > tr > td {
+ padding: 7px 20px 8px;
+
+ &.devui-table__checkable-cell {
+ padding: 8px;
+ }
+ }
+
+ thead > tr > th.devui-table__checkable-cell {
+ padding: 8px;
+ }
+ }
+
+ &--md {
+ tbody > tr > td {
+ padding: 11px 20px 12px;
+ }
+
+ thead > tr > th.devui-table__checkable-cell {
+ padding: 8px 20px;
+ }
+ }
+
+ &--lg {
+ tbody > tr > td {
+ padding: 15px 20px 16px;
+ }
+
+ thead > tr > th.devui-table__checkable-cell {
+ padding: 8px 20px;
+ }
+ }
}
diff --git a/packages/devui-vue/docs/components/table/index.md b/packages/devui-vue/docs/components/table/index.md
index e26208b735..f48c533c6b 100644
--- a/packages/devui-vue/docs/components/table/index.md
+++ b/packages/devui-vue/docs/components/table/index.md
@@ -88,8 +88,16 @@ export default defineComponent({
表头背景色:
+
+ 表格大小:
+
+
+ {{ item.label }}
+
+
+
-
+
@@ -105,6 +113,21 @@ export default defineComponent({
const tableLayout = ref(false);
const striped = ref(false);
const headerBg = ref(false);
+ const size = ref('sm');
+ const sizeList = [
+ {
+ label: 'Normal',
+ value: 'sm',
+ },
+ {
+ label: 'Middle',
+ value: 'md',
+ },
+ {
+ label: 'large',
+ value: 'lg',
+ },
+ ];
const stripedTableData = ref([
{
firstName: 'Mark',
@@ -136,6 +159,8 @@ export default defineComponent({
stripedTableData,
striped,
headerBg,
+ size,
+ sizeList,
tableLayout,
};
},
@@ -145,12 +170,12 @@ export default defineComponent({
```
@@ -369,21 +394,22 @@ export default defineComponent({
### d-table 参数
-| 参数 | 类型 | 默认值 | 说明 |
-| :-------------------- | :------------------ | :------ | :------------------------------ |
-| data | `Array` | [] | 显示的数据 |
-| striped | `Boolean` | false | 是否显示斑马纹间隔 |
-| max-width | `String` | -- | 表格最大宽度 |
-| max-height | `Boolean` | -- | 表格最大高度 |
-| table-width | `String` | -- | 表格宽度 |
-| table-height | `String` | -- | 表格高度 |
-| row-hovered-highlight | `Boolean` | true | 鼠标在该行上时,高亮该行 |
-| fix-header | `Boolean` | false | 固定头部 |
-| checkable | `Boolean` | false | 在每行的第一列展示一个 checkbox |
-| show-loading | `Boolean` | false | 显示加载动画 |
-| header-bg | `Boolean` | false | 头部背景 |
-| table-layout | `'fixed' \| 'auto'` | 'fixed' | 表格布局,可选值为'auto' |
-| span-method | `SpanMethod` | -- | 合并单元格的计算方法 |
+| 参数 | 类型 | 默认值 | 说明 |
+| :-------------------- | :--------------------- | :------ | :------------------------------------------ |
+| data | `array` | [] | 显示的数据 |
+| striped | `boolean` | false | 是否显示斑马纹间隔 |
+| size | `'sm' \| 'md' \| 'lg'` | 'sm' | 可选,表格大小,分别对应行高 40px,48px,56px |
+| max-width | `string` | -- | 表格最大宽度 |
+| max-height | `boolean` | -- | 表格最大高度 |
+| table-width | `string` | -- | 表格宽度 |
+| table-height | `string` | -- | 表格高度 |
+| row-hovered-highlight | `boolean` | true | 鼠标在该行上时,高亮该行 |
+| fix-header | `boolean` | false | 固定头部 |
+| checkable | `boolean` | false | 在每行的第一列展示一个 checkbox |
+| show-loading | `boolean` | false | 显示加载动画 |
+| header-bg | `boolean` | false | 头部背景 |
+| table-layout | `'fixed' \| 'auto'` | 'fixed' | 表格布局,可选值为'auto' |
+| span-method | `SpanMethod` | -- | 合并单元格的计算方法 |
### d-column 参数