feat(Table): 表格支持sm/md/lg三种大小 (DevCloudFE#353)

* feat(Table): 使用Rem规范修改Table组件样式命名 * refactor(Table): TD和TH组件从body、header中抽离,解决一个文件定义多个组件的eslint报错 * feat(Table): 完成Table组件合并单元格功能 * feat(Table): 修改函数命名 * feat(Table): 表格支持sm/md/lg三种大小

Author: xingyan95

packages/devui-vue/devui/table/src/components/body/body.scss

@@ -3,19 +3,22 @@
 .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 {
  background-color: $devui-list-item-hover-bg;
  }
 
  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;
  }
  }
  }

packages/devui-vue/devui/table/src/components/body/body.tsx

@@ -18,7 +18,7 @@ export default defineComponent({
 
  const renderCheckbox = (index: number) =>
  table.props.checkable ? (
- <td {...tdAttrs.value}>
+ <td class={ns.e('checkable-cell')} {...tdAttrs.value}>
  <Checkbox v-model={checkList.value[index]} />
  </td>
  ) : null;

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

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 ? (
- <th {...thAttrs.value}>
- <Checkbox style="padding:10px;" v-model={checkAll.value} halfchecked={halfChecked.value} />
+ <th class={ns.e('checkable-cell')} {...thAttrs.value}>
+ <Checkbox v-model={checkAll.value} halfchecked={halfChecked.value} />
  </th>
  ) : null
  );

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<CSSProperties> = computed(() => ({
  maxHeight: props.maxHeight,

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'>,

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

packages/devui-vue/docs/components/table/index.md

@@ -88,8 +88,16 @@ export default defineComponent({
  表头背景色：
  <d-switch v-model:checked="headerBg" />
  </div>
+ <div class="table-btn">
+ 表格大小：
+ <d-radio-group direction="row" v-model="size">
+ <d-radio v-for="item in sizeList" :key="item.label" :value="item.value">
+ {{ item.label }}
+ </d-radio>
+ </d-radio-group>
+ </div>
  </div>
- <d-table :table-layout="tableLayout ? 'auto' : 'fixed'" :striped="striped" :header-bg="headerBg" :data="stripedTableData">
+ <d-table :table-layout="tableLayout ? 'auto' : 'fixed'" :striped="striped" :header-bg="headerBg" :data="stripedTableData" :size="size">
  <d-column field="firstName" header="First Name"></d-column>
  <d-column field="lastName" header="Last Name"></d-column>
  <d-column field="gender" header="Gender"></d-column>
@@ -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({
 <style lang="scss">
 .table-btn-groups {
  display: flex;
- margin-bottom: 1rem;
 }
 .table-btn {
  display: flex;
- flex-direction: column;
- justify-content: space-between;
+ justify-content: flex-start;
+ align-items: center;
+ margin-right: 1rem;
 }
 </style>
 ```
@@ -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 参数