Skip to content

Commit fb7580d

Browse files
MoonofweishengMoonofweisheng
authored
docs: ✏️ Table 表格组件提供结合分页器使用的demo (#738)
1 parent 1b9d7e6 commit fb7580d

2 files changed

Lines changed: 275 additions & 32 deletions

File tree

‎docs/component/table.md‎

Lines changed: 232 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88

99
通过`data`设置表格数据。
1010

11+
::: details 基础用法
12+
1113
```html
1214
<wd-table :data="dataList">
1315
<wd-table-col prop="name" label="姓名"></wd-table-col>
@@ -36,6 +38,8 @@ const dataList = reactive([
3638
])
3739
```
3840

41+
:::
42+
3943
## 固定列
4044

4145
通过`fixed`设置表格列是否固定展示，默认`false`。
@@ -57,15 +61,15 @@ const dataList = reactive([
5761

5862
```html
5963
<wd-table :data="dataList" height="328px" :index="true">
60-
<wd-table-col prop="name" label="姓名" :sortable="true"></wd-table-col>
61-
<wd-table-col prop="grade" label="分数" :sortable="true"></wd-table-col>
62-
<wd-table-col prop="hobby" label="一言以蔽之" :sortable="true" :width="160"></wd-table-col>
64+
<wd-table-col prop="name" label="姓名" sortable></wd-table-col>
65+
<wd-table-col prop="grade" label="分数" sortable></wd-table-col>
66+
<wd-table-col prop="hobby" label="一言以蔽之" sortable :width="160"></wd-table-col>
6367
</wd-table>
6468

6569
<wd-table :data="dataList" height="328px" :index="{ align: 'center', width: 200 }">
66-
<wd-table-col prop="name" label="姓名" :sortable="true" align="center"></wd-table-col>
67-
<wd-table-col prop="grade" label="分数" :sortable="true" align="center"></wd-table-col>
68-
<wd-table-col prop="hobby" label="一言以蔽之" :sortable="true" :width="160"></wd-table-col>
70+
<wd-table-col prop="name" label="姓名" sortable align="center"></wd-table-col>
71+
<wd-table-col prop="grade" label="分数" sortable align="center"></wd-table-col>
72+
<wd-table-col prop="hobby" label="一言以蔽之" sortable :width="160"></wd-table-col>
6973
</wd-table>
7074
```
7175

@@ -112,7 +116,7 @@ const dataList = reactive([
112116
```html
113117
<wd-table :data="dataList" @sort-method="handleSort">
114118
<wd-table-col prop="name" label="姓名"></wd-table-col>
115-
<wd-table-col prop="school" label="求学之所" :sortable="true"></wd-table-col>
119+
<wd-table-col prop="school" label="求学之所" sortable></wd-table-col>
116120
<wd-table-col prop="major" label="专业"></wd-table-col>
117121
</wd-table>
118122
```
@@ -128,18 +132,20 @@ function handleSort(e) {
128132
自定义列的显示内容，可组合其他组件使用。
129133
通过 `Scoped slot` 可以获取到 `row`, `index` 的数据，用法参考 demo。
130134

135+
::: details 查看自定义列模版 demo
136+
131137
```html
132138
<wd-table :data="dataList" @sort-method="handleSort">
133-
<wd-table-col prop="name" label="姓名" fixed="true" width="320rpx" :sortable="true"></wd-table-col>
134-
<wd-table-col prop="grade" label="分数" width="220rpx" :sortable="true">
139+
<wd-table-col prop="name" label="姓名" fixed="true" width="320rpx" sortable></wd-table-col>
140+
<wd-table-col prop="grade" label="分数" width="220rpx" sortable>
135141
<template #value="{row}">
136142
<view class="custom-class">
137143
<text>{{ row.grade }}</text>
138144
<text>同比{{ row.compare }}</text>
139145
</view>
140146
</template>
141147
</wd-table-col>
142-
<wd-table-col prop="hobby" label="一言以蔽之" :sortable="true"></wd-table-col>
148+
<wd-table-col prop="hobby" label="一言以蔽之" sortable></wd-table-col>
143149
<wd-table-col prop="school" label="求学之所"></wd-table-col>
144150
<wd-table-col prop="major" label="专业"></wd-table-col>
145151
<wd-table-col prop="gender" label="性别"></wd-table-col>
@@ -149,8 +155,18 @@ function handleSort(e) {
149155

150156
```ts
151157
import { ref } from 'vue'
158+
interface TableData {
159+
name: string
160+
school: string
161+
major: string
162+
gender: string
163+
graduation: string
164+
grade: number
165+
compare: string
166+
hobby: string
167+
}
152168

153-
const dataList = ref<Record<string, any>[]>([
169+
const dataList = ref<TableData[]>([
154170
{
155171
name: '张飞',
156172
school: '武汉市阳逻杀猪学院',
@@ -232,18 +248,213 @@ function handleSort(e) {
232248
}
233249
```
234250

251+
:::
252+
253+
## 结合分页器使用
254+
255+
使用`pagination`组件，通过`v-model`绑定分页器当前页码，通过`total`设置分页器总条数，实现分页加载效果。
256+
257+
::: details 查看结合分页器使用demo
258+
```html
259+
<wd-table :data="paginationData" height="auto">
260+
<wd-table-col prop="name" label="姓名" fixed align="center"></wd-table-col>
261+
<wd-table-col prop="grade" label="分数" fixed align="center"></wd-table-col>
262+
<wd-table-col prop="hobby" label="一言以蔽之" :width="160"></wd-table-col>
263+
<wd-table-col prop="school" label="求学之所" :width="180"></wd-table-col>
264+
<wd-table-col prop="major" label="专业"></wd-table-col>
265+
<wd-table-col prop="gender" label="性别"></wd-table-col>
266+
</wd-table>
267+
<wd-pagination custom-style="border: 1px solid #ececec;border-top:none" v-model="page" :total="total"></wd-pagination>
268+
```
269+
270+
```ts
271+
interface TableData {
272+
name: string
273+
school: string
274+
major: string
275+
gender: string
276+
graduation: string
277+
grade: number
278+
compare: string
279+
hobby: string
280+
}
281+
282+
const dataList = ref<TableData[]>([
283+
{
284+
name: '关羽',
285+
school: '武汉市阳逻绿豆学院',
286+
major: '计算机科学与技术专业',
287+
gender: '男',
288+
graduation: '2022年1月12日',
289+
grade: 66,
290+
compare: '48%',
291+
hobby: '颜良文丑，以吾观之，如土鸡瓦犬耳。'
292+
},
293+
{
294+
name: '刘备',
295+
school: '武汉市阳逻编织学院',
296+
major: '计算机科学与技术专业',
297+
gender: '男',
298+
graduation: '2022年1月12日',
299+
grade: 68,
300+
compare: '21%',
301+
hobby: '我得空明，如鱼得水也'
302+
},
303+
{
304+
name: '赵云',
305+
school: '武汉市阳逻妇幼保健学院',
306+
major: '计算机科学与技术专业',
307+
gender: '男',
308+
graduation: '2022年1月12日',
309+
grade: 91,
310+
compare: '12%',
311+
hobby: '子龙，子龙，世无双'
312+
},
313+
{
314+
name: '赵云',
315+
school: '武汉市阳逻妇幼保健学院',
316+
major: '计算机科学与技术专业',
317+
gender: '男',
318+
graduation: '2022年1月12日',
319+
grade: 91,
320+
compare: '12%',
321+
hobby: '子龙，子龙，世无双'
322+
},
323+
{
324+
name: '孔明',
325+
school: '武汉市阳逻卧龙学院',
326+
major: '计算机科学与技术专业',
327+
gender: '男',
328+
graduation: '2022年1月12日',
329+
grade: 99,
330+
compare: '18%',
331+
hobby: '兴汉讨贼，克复中原'
332+
},
333+
{
334+
name: '赵云',
335+
school: '武汉市阳逻妇幼保健学院',
336+
major: '计算机科学与技术专业',
337+
gender: '男',
338+
graduation: '2022年1月12日',
339+
grade: 36,
340+
compare: '48%',
341+
hobby: '子龙，子龙，世无双'
342+
},
343+
{
344+
name: '关羽',
345+
school: '武汉市阳逻绿豆学院',
346+
major: '计算机科学与技术专业',
347+
gender: '男',
348+
graduation: '2022年1月12日',
349+
grade: 66,
350+
compare: '48%',
351+
hobby: '颜良文丑，以吾观之，如土鸡瓦犬耳。'
352+
},
353+
{
354+
name: '刘备',
355+
school: '武汉市阳逻编织学院',
356+
major: '计算机科学与技术专业',
357+
gender: '男',
358+
graduation: '2022年1月12日',
359+
grade: 68,
360+
compare: '21%',
361+
hobby: '我得空明，如鱼得水也'
362+
},
363+
{
364+
name: '赵云',
365+
school: '武汉市阳逻妇幼保健学院',
366+
major: '计算机科学与技术专业',
367+
gender: '男',
368+
graduation: '2022年1月12日',
369+
grade: 91,
370+
compare: '12%',
371+
hobby: '子龙，子龙，世无双'
372+
},
373+
{
374+
name: '孔明',
375+
school: '武汉市阳逻卧龙学院',
376+
major: '计算机科学与技术专业',
377+
gender: '男',
378+
graduation: '2022年1月12日',
379+
grade: 99,
380+
compare: '18%',
381+
hobby: '兴汉讨贼，克复中原'
382+
},
383+
{
384+
name: '赵云',
385+
school: '武汉市阳逻妇幼保健学院',
386+
major: '计算机科学与技术专业',
387+
gender: '男',
388+
graduation: '2022年1月12日',
389+
grade: 36,
390+
compare: '48%',
391+
hobby: '子龙，子龙，世无双'
392+
},
393+
{
394+
name: '关羽',
395+
school: '武汉市阳逻绿豆学院',
396+
major: '计算机科学与技术专业',
397+
gender: '男',
398+
graduation: '2022年1月12日',
399+
grade: 66,
400+
compare: '48%',
401+
hobby: '颜良文丑，以吾观之，如土鸡瓦犬耳。'
402+
},
403+
{
404+
name: '刘备',
405+
school: '武汉市阳逻编织学院',
406+
major: '计算机科学与技术专业',
407+
gender: '男',
408+
graduation: '2022年1月12日',
409+
grade: 68,
410+
compare: '21%',
411+
hobby: '我得空明，如鱼得水也'
412+
},
413+
{
414+
name: '赵云',
415+
school: '武汉市阳逻妇幼保健学院',
416+
major: '计算机科学与技术专业',
417+
gender: '男',
418+
graduation: '2022年1月12日',
419+
grade: 91,
420+
compare: '12%',
421+
hobby: '子龙，子龙，世无双'
422+
},
423+
{
424+
name: '孔明',
425+
school: '武汉市阳逻卧龙学院',
426+
major: '计算机科学与技术专业',
427+
gender: '男',
428+
graduation: '2022年1月12日',
429+
grade: 99,
430+
compare: '18%',
431+
hobby: '兴汉讨贼，克复中原'
432+
}
433+
])
434+
const page = ref<number>(1)
435+
const pageSize = ref<number>(10)
436+
437+
const total = ref<number>(dataList.value.length)
438+
439+
const paginationData = computed(() => {
440+
// 按页码和每页条数截取数据
441+
return dataList.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value)
442+
})
443+
```
444+
:::
445+
235446
## Attributes
236447

237-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
238-
| ---------- | --------------------------------------------------- | ---------------------------- | ------ | ------ | ---------------- |
239-
| data | 显示的数据 | Array | - | - | 0.0.39 |
240-
| border | 是否带有边框 | boolean | - | true | 0.0.39 |
241-
| stripe | 是否为斑马纹表 | boolean | - | true | 0.0.39 |
242-
| height | Table 的高度，默认为`80vh` | string | - | `80vh` | 0.0.39 |
243-
| rowHeight | 行高 | `number / string` | - | 50 | 0.0.39 |
244-
| showHeader | 是否显示表头 | boolean | - | true | 0.0.39 |
245-
| ellipsis | 是否超出 2 行隐藏 | boolean | - | true | 0.0.39 |
246-
| index | 是否显示索引列，可传入`boolean`也可传入 column 配置 | `boolean / TableColumnProps` | | false | 1.2.19 |
448+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
449+
| ---------- | --------------------------------------------------- | ---------------------------- | ------ | ------ | -------- |
450+
| data | 显示的数据 | Array | - | - | 0.0.39 |
451+
| border | 是否带有边框 | boolean | - | true | 0.0.39 |
452+
| stripe | 是否为斑马纹表 | boolean | - | true | 0.0.39 |
453+
| height | Table 的高度，默认为`80vh` | string | - | `80vh` | 0.0.39 |
454+
| rowHeight | 行高 | `number / string` | - | 50 | 0.0.39 |
455+
| showHeader | 是否显示表头 | boolean | - | true | 0.0.39 |
456+
| ellipsis | 是否超出 2 行隐藏 | boolean | - | true | 0.0.39 |
457+
| index | 是否显示索引列，可传入`boolean`也可传入 column 配置 | `boolean / TableColumnProps` | | false | 1.2.19 |
247458

248459
## Events
249460

0 commit comments

Comments
 (0)