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 参数