Skip to content

fix(Table): 优化Table组件文档和表头样式 #415

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
kagol merged 1 commit into from
Apr 7, 2022
Merged

fix(Table): 优化Table组件文档和表头样式 #415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 3 additions & 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 @@ -3,9 +3,6 @@
.devui-table {
&__thead {
tr {
font-size: $devui-font-size-card-title;
color: $devui-text;
font-weight: 700;
border: none;
background-color: $devui-base-bg;

Expand All @@ -27,6 +24,9 @@

.title {
display: inline-block;
font-size: $devui-font-size;
color: $devui-text;
font-weight: 700;
line-height: 36px;
vertical-align: middle;
white-space: nowrap;
Expand Down
34 changes: 13 additions & 21 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 @@ -403,7 +403,7 @@ export default defineComponent({
<d-column field="firstName">
<template #header>
<div>
<span style="margin-right:4px;">First Name</span>
<span style="margin-right:4px;font-size:var(--devui-font-size,12px)">First Name</span>
<d-popover content="some tips text" trigger="hover" :position="['top']">
<template #reference>
<d-icon name="info-o"></d-icon>
Expand Down Expand Up @@ -757,7 +757,7 @@ export default defineComponent({

```vue
<template>
<d-table :data="dataSource" border-type="bordered" header-bg>
<d-table :data="dataSource">
<d-column field="name" header="Name">
<d-column field="firstName" header="First Name"></d-column>
<d-column field="lastName" header="Last Name"></d-column>
Expand Down Expand Up @@ -834,18 +834,16 @@ export default defineComponent({

### d-column 参数

| 参数名 | 类型 | 默认值 | 说明 | 跳转 Demo |
| :--------- | :----------------- | :----------------------------------- | :------------------------------------------ | :-------------------- |
| header | `string` | -- | 可选，对应列的标题 | [基本用法](#基本用法) |
| field | `string` | -- | 可选，对应列内容的字段名 | [基本用法](#基本用法) |
| type | `ColumnType` | '' | 可选，列的类型，设置`checkable`会显示多选框 | [表格多选](#表格多选) |
| width | `string \| number` | -- | 可选，对应列的宽度，单位`px` |
| min-width | `string \| number` | -- | 可选，对应列的最小宽度，单位`px` |
| sortable | `boolean` | false | 可选，对行数据按照该列的顺序进行排序 |
| fixedLeft | `string` | -- | 可选，该列固定到左侧的距离，如：'100px' | [固定列](#固定列) |
| fixedRight | `string` | -- | 可选，该列固定到右侧的距离，如：'100px' | [固定列](#固定列) |
| formatter | `Formatter` | -- | 可选，格式化列内容 |
| compareFn | `CompareFn` | (field, a, b) => a[field] > b[field] | 可选，用于排序的比较函数 |
| 参数名 | 类型 | 默认值 | 说明 | 跳转 Demo |
| :---------- | :----------------- | :----- | :------------------------------------------ | :-------------------- |
| header | `string` | -- | 可选，对应列的标题 | [基本用法](#基本用法) |
| field | `string` | -- | 可选，对应列内容的字段名 | [基本用法](#基本用法) |
| type | `ColumnType` | '' | 可选，列的类型，设置`checkable`会显示多选框 | [表格多选](#表格多选) |
| width | `string \| number` | -- | 可选，对应列的宽度，单位`px` |
| min-width | `string \| number` | -- | 可选，对应列的最小宽度，单位`px` |
| fixed-left | `string` | -- | 可选，该列固定到左侧的距离，如：'100px' | [固定列](#固定列) |
| fixed-right | `string` | -- | 可选，该列固定到右侧的距离，如：'100px' | [固定列](#固定列) |
| formatter | `Formatter` | -- | 可选，格式化列内容 |

### d-column 插槽

Expand Down Expand Up @@ -882,17 +880,11 @@ type BorderType = '' | 'bordered' | 'borderless';
#### ColumnType

```ts
type ColumnType = 'checkable' | '';
type ColumnType = 'checkable' | 'index' | '';
```

#### Formatter

```ts
type Formatter = (row: any, column: any, cellValue: any, rowIndex: number) => VNode;
```

#### CompareFn

```ts
type CompareFn<T = any> = (field: string, a: T, b: T) => boolean;
```