Skip to content

Commit b0a2461

Browse files
MoonofweishengMoonofweisheng
authored
feat: ✨ Table 支持设置不固定表头 (#769)
1 parent 97c4004 commit b0a2461

File tree

6 files changed

+185
-107
lines changed

6 files changed

+185
-107
lines changed

‎docs/component/table.md‎

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,18 @@
22

33
用于展示多条结构类似的数据， 可对数据进行排序等操作。
44

5+
::: warning 提示
6+
`$LOWEST_VERSION$`后取消了`height`的默认值，需要自行设置，最好设置为`number`类型，方便未来适配虚拟列表。
7+
:::
8+
59
## 基础用法
610

711
通过`data`设置表格数据。
812

913
::: details 基础用法
1014

1115
```html
12-
<wd-table :data="dataList">
16+
<wd-table :data="dataList" :height="400">
1317
<wd-table-col prop="name" label="姓名"></wd-table-col>
1418
<wd-table-col prop="school" label="求学之所"></wd-table-col>
1519
<wd-table-col prop="major" label="专业"></wd-table-col>
@@ -46,7 +50,7 @@ const dataList = reactive([
4650
:::
4751

4852
```html
49-
<wd-table :data="dataList">
53+
<wd-table :data="dataList" :height="400">
5054
<wd-table-col prop="name" label="姓名" fixed></wd-table-col>
5155
<wd-table-col prop="school" label="求学之所"></wd-table-col>
5256
<wd-table-col prop="major" label="专业"></wd-table-col>
@@ -58,7 +62,7 @@ const dataList = reactive([
5862
通过`index`设置表格是否显示序号列，默认为`false`。同时也可以传入对象对序号列进行配置，参数同`TableColumnProps`
5963

6064
```html
61-
<wd-table :data="dataList" height="328px" :index="true">
65+
<wd-table :data="dataList" height="328px" :index="true" :height="400">
6266
<wd-table-col prop="name" label="姓名" sortable></wd-table-col>
6367
<wd-table-col prop="grade" label="分数" sortable></wd-table-col>
6468
<wd-table-col prop="hobby" label="一言以蔽之" sortable :width="160"></wd-table-col>
@@ -76,7 +80,7 @@ const dataList = reactive([
7680
通过`stripe`设置表格是否展示斑马纹，默认`true`。
7781

7882
```html
79-
<wd-table :data="dataList" :stripe="false">
83+
<wd-table :data="dataList" :stripe="false" :height="400">
8084
<wd-table-col prop="name" label="姓名"></wd-table-col>
8185
<wd-table-col prop="school" label="求学之所"></wd-table-col>
8286
<wd-table-col prop="major" label="专业"></wd-table-col>
@@ -88,7 +92,7 @@ const dataList = reactive([
8892
通过`border`设置表格是否展示边框，默认`true`。
8993

9094
```html
91-
<wd-table :data="dataList" :border="false">
95+
<wd-table :data="dataList" :border="false" :height="400">
9296
<wd-table-col prop="name" label="姓名"></wd-table-col>
9397
<wd-table-col prop="school" label="求学之所"></wd-table-col>
9498
<wd-table-col prop="major" label="专业"></wd-table-col>
@@ -97,10 +101,10 @@ const dataList = reactive([
97101

98102
## 表格高度
99103

100-
通过`height`设置表格高度，默认为`80vh`。
104+
通过`height`设置表格高度，设置高度后会自动固定表头。
101105

102106
```html
103-
<wd-table :data="dataList" height="328px">
107+
<wd-table :data="dataList" :height="400">
104108
<wd-table-col prop="name" label="姓名"></wd-table-col>
105109
<wd-table-col prop="school" label="求学之所"></wd-table-col>
106110
<wd-table-col prop="major" label="专业"></wd-table-col>
@@ -112,7 +116,7 @@ const dataList = reactive([
112116
当存在列参与排序时，点击会触发`sort-method`排序事件。
113117

114118
```html
115-
<wd-table :data="dataList" @sort-method="handleSort">
119+
<wd-table :data="dataList" @sort-method="handleSort" :height="400">
116120
<wd-table-col prop="name" label="姓名"></wd-table-col>
117121
<wd-table-col prop="school" label="求学之所" sortable></wd-table-col>
118122
<wd-table-col prop="major" label="专业"></wd-table-col>
@@ -133,7 +137,7 @@ function handleSort(e) {
133137
::: details 查看自定义列模版 demo
134138

135139
```html
136-
<wd-table :data="dataList" @sort-method="handleSort">
140+
<wd-table :data="dataList" @sort-method="handleSort" :height="400">
137141
<wd-table-col prop="name" label="姓名" fixed="true" width="320rpx" sortable></wd-table-col>
138142
<wd-table-col prop="grade" label="分数" width="220rpx" sortable>
139143
<template #value="{row}">
@@ -248,13 +252,16 @@ function handleSort(e) {
248252

249253
:::
250254

251-
## 结合分页器使用
255+
## 不固定表头结合分页器使用
252256

253257
使用`pagination`组件，通过`v-model`绑定分页器当前页码，通过`total`设置分页器总条数，实现分页加载效果。
254258

255-
::: details 查看结合分页器使用demo
259+
设置`fixed-header`为`false`，取消固定表头。
260+
261+
::: details 查看结合分页器使用 demo
262+
256263
```html
257-
<wd-table :data="paginationData" height="auto">
264+
<wd-table :data="paginationData" :height="400" :fixed-header="false">
258265
<wd-table-col prop="name" label="姓名" fixed align="center"></wd-table-col>
259266
<wd-table-col prop="grade" label="分数" fixed align="center"></wd-table-col>
260267
<wd-table-col prop="hobby" label="一言以蔽之" :width="160"></wd-table-col>
@@ -439,20 +446,22 @@ const paginationData = computed(() => {
439446
return dataList.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value)
440447
})
441448
```
449+
442450
:::
443451

444452
## Attributes
445453

446-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
447-
| ---------- | --------------------------------------------------- | ---------------------------- | ------ | ------ | -------- |
448-
| data | 显示的数据 | Array | - | - | 0.0.39 |
449-
| border | 是否带有边框 | boolean | - | true | 0.0.39 |
450-
| stripe | 是否为斑马纹表 | boolean | - | true | 0.0.39 |
451-
| height | Table 的高度，默认为`80vh` | string | - | `80vh` | 0.0.39 |
452-
| rowHeight | 行高 | `number / string` | - | 50 | 0.0.39 |
453-
| showHeader | 是否显示表头 | boolean | - | true | 0.0.39 |
454-
| ellipsis | 是否超出 2 行隐藏 | boolean | - | true | 0.0.39 |
455-
| index | 是否显示索引列，可传入`boolean`也可传入 column 配置 | `boolean / TableColumnProps` | | false | 1.2.19 |
454+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
455+
| --------------- | --------------------------------------------------- | ---------------------------- | ------ | ------ | ---------------- |
456+
| data | 显示的数据 | Array | - | - | 0.0.39 |
457+
| border | 是否带有边框 | boolean | - | true | 0.0.39 |
458+
| stripe | 是否为斑马纹表 | boolean | - | true | 0.0.39 |
459+
| height | Table 的高度，无默认值，设置后自动开启固定表头。 | `number / string` | - | - | 0.0.39 |
460+
| rowHeight | 行高 | `number / string` | - | 50 | 0.0.39 |
461+
| showHeader | 是否显示表头 | boolean | - | true | 0.0.39 |
462+
| ellipsis | 是否超出 2 行隐藏 | boolean | - | true | 0.0.39 |
463+
| index | 是否显示索引列，可传入`boolean`也可传入 column 配置 | `boolean / TableColumnProps` | | false | 1.2.19 |
464+
| fixed-header | 是否固定表头，需要结合`height`才可以实现固定表头的效果。 | boolean | - | true | $LOWEST_VERSION$ |
456465

457466
## Events
458467

‎src/pages/table/Index.vue‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
11
<template>
22
<page-wraper>
33
<demo-block title="基本用法">
4-
<wd-table :data="dataList" @sort-method="handleSort" height="328px" @row-click="handleRowClick">
4+
<wd-table :data="dataList" @sort-method="handleSort" :height="400" @row-click="handleRowClick">
55
<wd-table-col prop="name" label="姓名" align="center" width="50%"></wd-table-col>
66
<wd-table-col prop="grade" label="分数" align="center" width="50%"></wd-table-col>
77
</wd-table>
88
</demo-block>
99

1010
<demo-block title="无边框">
11-
<wd-table :data="dataList" @sort-method="handleSort" height="328px" :border="false" @row-click="handleRowClick">
11+
<wd-table :data="dataList" @sort-method="handleSort" :height="400" :border="false" @row-click="handleRowClick">
1212
<wd-table-col prop="name" label="姓名" align="center" width="50%"></wd-table-col>
1313
<wd-table-col prop="grade" label="分数" align="center" width="50%"></wd-table-col>
1414
</wd-table>
1515
</demo-block>
1616

1717
<demo-block title="无斑马纹">
18-
<wd-table :data="dataList" @sort-method="handleSort" height="328px" :stripe="false" @row-click="handleRowClick">
18+
<wd-table :data="dataList" @sort-method="handleSort" :height="400" :stripe="false" @row-click="handleRowClick">
1919
<wd-table-col prop="name" label="姓名" align="center" width="50%"></wd-table-col>
2020
<wd-table-col prop="grade" label="分数" align="center" width="50%"></wd-table-col>
2121
</wd-table>
2222
</demo-block>
2323

2424
<demo-block title="不展示表头">
25-
<wd-table :data="dataList" @sort-method="handleSort" height="328px" :show-header="false" @row-click="handleRowClick">
25+
<wd-table :data="dataList" @sort-method="handleSort" :height="400" :show-header="false" @row-click="handleRowClick">
2626
<wd-table-col prop="name" label="姓名" align="center" width="50%"></wd-table-col>
2727
<wd-table-col prop="grade" label="分数" align="center" width="50%"></wd-table-col>
2828
</wd-table>
2929
</demo-block>
3030

3131
<demo-block title="固定列">
32-
<wd-table :data="dataList" @sort-method="handleSort" @row-click="handleRowClick" height="328px">
32+
<wd-table :data="dataList" @sort-method="handleSort" @row-click="handleRowClick" :height="400">
3333
<wd-table-col prop="name" label="姓名" fixed sortable align="center"></wd-table-col>
3434
<wd-table-col prop="grade" label="分数" fixed sortable align="center"></wd-table-col>
3535
<wd-table-col prop="hobby" label="一言以蔽之" sortable :width="160"></wd-table-col>
@@ -40,7 +40,7 @@
4040
</demo-block>
4141

4242
<demo-block title="显示索引">
43-
<wd-table :data="dataList" height="328px" @sort-method="handleSort" :index="{ align: 'center' }">
43+
<wd-table :data="dataList" :height="400" @sort-method="handleSort" :index="{ align: 'center' }">
4444
<wd-table-col prop="name" label="姓名" sortable align="center"></wd-table-col>
4545
<wd-table-col prop="grade" label="分数" sortable align="center"></wd-table-col>
4646
<wd-table-col prop="hobby" label="一言以蔽之" sortable :width="160"></wd-table-col>
@@ -51,7 +51,7 @@
5151
</demo-block>
5252

5353
<demo-block title="自定义列模板">
54-
<wd-table :data="dataList" @sort-method="handleSort" @row-click="handleRowClick" height="328px">
54+
<wd-table :data="dataList" @sort-method="handleSort" @row-click="handleRowClick" :height="400">
5555
<wd-table-col prop="name" label="姓名" fixed sortable align="center"></wd-table-col>
5656
<wd-table-col prop="grade" label="分数" fixed sortable align="center">
5757
<template #value="{ row }">
@@ -69,8 +69,8 @@
6969
</wd-table>
7070
</demo-block>
7171

72-
<demo-block title="结合分页器">
73-
<wd-table :data="paginationData" height="auto">
72+
<demo-block title="不固定表头结合分页器">
73+
<wd-table :data="paginationData" :fixed-header="false">
7474
<wd-table-col prop="name" label="姓名" fixed align="center"></wd-table-col>
7575
<wd-table-col prop="grade" label="分数" fixed align="center"></wd-table-col>
7676
<wd-table-col prop="hobby" label="一言以蔽之" :width="160"></wd-table-col>

‎src/uni_modules/wot-design-uni/components/wd-table-col/wd-table-col.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<view
3-
:class="`wd-table-col ${fixed ? 'wd-table-col--fixed' : ''} ${isLastFixed && isDef(table) && table.scrollLeft ? 'is-shadow' : ''}`"
3+
:class="`wd-table-col ${fixed ? 'wd-table-col--fixed' : ''} ${isLastFixed && isDef(table) && table.state.scrollLeft ? 'is-shadow' : ''}`"
44
:style="columnStyle"
55
>
66
<view
@@ -27,7 +27,7 @@ export default {
2727
}
2828
</script>
2929
<script lang="ts" setup>
30-
import { type CSSProperties, computed, ref, watch } from 'vue'
30+
import { type CSSProperties, computed, ref } from 'vue'
3131
import { addUnit, isDef, objToStyle, isOdd, isFunction } from '../common/util'
3232
import { tableColumnProps, type SortDirection } from './types'
3333
import { useParent } from '../composables/useParent'
@@ -100,7 +100,7 @@ const columnStyle = computed(() => {
100100
*/
101101
const cellStyle = computed(() => {
102102
let style: CSSProperties = {}
103-
const rowHeight: string | number = isDef(table) ? table.props.rowHeight : '80rpx' // 自定义行高
103+
const rowHeight: string | number = isDef(table) ? table.props.rowHeight : 50 // 自定义行高
104104
if (isDef(rowHeight)) {
105105
style['height'] = addUnit(rowHeight)
106106
}

‎src/uni_modules/wot-design-uni/components/wd-table/index.scss‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@
4343
border: 1px solid $-table-border-color;
4444
}
4545

46-
4746
:deep() {
4847
.wd-table-col:last-child {
4948
.wd-table__cell {
@@ -72,6 +71,12 @@
7271

7372
@include e(content) {
7473
display: flex;
74+
75+
@include m(header) {
76+
position: sticky;
77+
top: 0;
78+
z-index: 2
79+
}
7580
}
7681

7782
@include e(cell) {
@@ -127,6 +132,26 @@
127132
}
128133
}
129134

135+
@include e(wrapper) {
136+
width: 100%;
137+
overflow: auto;
138+
}
139+
140+
@include e(inner) {
141+
display: flex;
142+
flex-direction: column;
143+
}
144+
145+
@include e(header-row) {
146+
display: flex;
147+
flex-direction: row;
148+
width: 100%;
149+
}
150+
151+
@include e(body) {
152+
display: flex;
153+
width: 100%;
154+
}
130155

131156
@include e(value) {
132157
@include when(ellipsis) {

‎src/uni_modules/wot-design-uni/components/wd-table/types.ts‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
/*
22
* @Author: weisheng
33
* @Date: 2024-03-15 11:36:12
4-
* @LastEditTime: 2024-07-18 19:02:32
4+
* @LastEditTime: 2024-12-08 23:22:26
55
* @LastEditors: weisheng
66
* @Description:
7-
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-table\types.ts
7+
* @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-table/types.ts
88
* 记得注释
99
*/
1010
import type { CSSProperties, ExtractPropTypes, InjectionKey } from 'vue'
11-
import { baseProps, makeBooleanProp, makeNumericProp, makeRequiredProp, makeStringProp } from '../common/props'
11+
import { baseProps, makeBooleanProp, makeNumericProp, makeRequiredProp, numericProp } from '../common/props'
1212
import type { TableColumnProps } from '../wd-table-col/types'
1313
import type { PropType } from 'vue'
1414

@@ -29,7 +29,7 @@ export const tableProps = {
2929
/**
3030
* Table 的高度
3131
*/
32-
height: makeStringProp('80vh'),
32+
height: numericProp,
3333
/**
3434
* 行高
3535
*/
@@ -48,14 +48,17 @@ export const tableProps = {
4848
index: {
4949
type: [Object, Boolean] as PropType<boolean | Omit<Partial<TableColumnProps>, 'prop'>>,
5050
default: false
51-
}
51+
},
52+
fixedHeader: makeBooleanProp(true)
5253
}
5354

5455
export type TableProps = ExtractPropTypes<typeof tableProps>
5556

5657
export type TableProvide = {
5758
props: Omit<TableProps, 'index' | 'customStyle' | 'customClass'>
58-
scrollLeft: number
59+
state: {
60+
scrollLeft: number
61+
}
5962
rowClick: (index: number) => void
6063
getIsLastFixed: (column: { fixed: boolean; prop: string }) => boolean
6164
getFixedStyle: (index: number, style: CSSProperties) => CSSProperties

0 commit comments

Comments
 (0)