Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Mar 28, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
01d2a81
feat(Table): 使用Rem规范修改Table组件样式命名
xingyan95 Mar 26, 2022
4faa703
refactor(Table): TD和TH组件从body、header中抽离,解决一个文件定义多个组件的eslint报错
xingyan95 Mar 26, 2022
3c2e2e7
Merge branch 'dev' into xingyan95/feat-table-spanMethod
xingyan95 Mar 26, 2022
ff7362a
feat(Table): 完成Table组件合并单元格功能
xingyan95 Mar 26, 2022
fc893ee
feat(Table): 修改函数命名
xingyan95 Mar 28, 2022
0e3a372
feat(Table): 表格支持sm/md/lg三种大小
xingyan95 Mar 28, 2022
e64e059
resolve conflict
xingyan95 Mar 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions packages/devui-vue/devui/table/src/components/body/body.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/devui-vue/devui/table/src/components/body/body.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 1 addition & 3 deletions packages/devui-vue/devui/table/src/components/header/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down
4 changes: 2 additions & 2 deletions packages/devui-vue/devui/table/src/components/header/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
);
Expand Down
1 change: 1 addition & 0 deletions packages/devui-vue/devui/table/src/composable/use-table.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
3 changes: 2 additions & 1 deletion packages/devui-vue/devui/table/src/table-types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export const TableProps = {
validator(value: string): boolean {
return value === 'sm' || value === 'md' || value === 'lg';
},
default: 'sm',
},
rowHoveredHighlight: {
type: Boolean,
Expand All @@ -51,7 +52,7 @@ export const TableProps = {
},
checkable: {
type: Boolean,
default: true,
default: false,
},
tableLayout: {
type: String as PropType<'fixed' | 'auto'>,
Expand Down
35 changes: 35 additions & 0 deletions packages/devui-vue/devui/table/src/table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
table-layout: fixed;
width: 100%;
border-spacing: 0;
border-collapse: separate;
border: none;
margin: 0;
padding: 0;
Expand Down Expand Up @@ -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;
}
}
}
64 changes: 45 additions & 19 deletions packages/devui-vue/docs/components/table/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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',
Expand Down Expand Up @@ -136,6 +159,8 @@ export default defineComponent({
stripedTableData,
striped,
headerBg,
size,
sizeList,
tableLayout,
};
},
Expand All @@ -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>
```
Expand Down Expand Up @@ -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 参数

Expand Down