Skip to content

Commit

Permalink
docs: ✏️ Table 表格组件提供结合分页器使用的demo (#738)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Moonofweisheng
Moonofweisheng authored Nov 26, 2024
1 parent 1b9d7e6 commit fb7580d
Show file tree
Hide file tree
Showing 2 changed files with 275 additions and 32 deletions.
253 changes: 232 additions & 21 deletions docs/component/table.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@

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

::: details 基础用法

```html
<wd-table :data="dataList">
<wd-table-col prop="name" label="姓名"></wd-table-col>
Expand Down Expand Up @@ -36,6 +38,8 @@ const dataList = reactive([
])
```

:::

## 固定列

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

```html
<wd-table :data="dataList" height="328px" :index="true">
<wd-table-col prop="name" label="姓名" :sortable="true"></wd-table-col>
<wd-table-col prop="grade" label="分数" :sortable="true"></wd-table-col>
<wd-table-col prop="hobby" label="一言以蔽之" :sortable="true" :width="160"></wd-table-col>
<wd-table-col prop="name" label="姓名" sortable></wd-table-col>
<wd-table-col prop="grade" label="分数" sortable></wd-table-col>
<wd-table-col prop="hobby" label="一言以蔽之" sortable :width="160"></wd-table-col>
</wd-table>

<wd-table :data="dataList" height="328px" :index="{ align: 'center', width: 200 }">
<wd-table-col prop="name" label="姓名" :sortable="true" align="center"></wd-table-col>
<wd-table-col prop="grade" label="分数" :sortable="true" align="center"></wd-table-col>
<wd-table-col prop="hobby" label="一言以蔽之" :sortable="true" :width="160"></wd-table-col>
<wd-table-col prop="name" label="姓名" sortable align="center"></wd-table-col>
<wd-table-col prop="grade" label="分数" sortable align="center"></wd-table-col>
<wd-table-col prop="hobby" label="一言以蔽之" sortable :width="160"></wd-table-col>
</wd-table>
```

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

::: details 查看自定义列模版 demo

```html
<wd-table :data="dataList" @sort-method="handleSort">
<wd-table-col prop="name" label="姓名" fixed="true" width="320rpx" :sortable="true"></wd-table-col>
<wd-table-col prop="grade" label="分数" width="220rpx" :sortable="true">
<wd-table-col prop="name" label="姓名" fixed="true" width="320rpx" sortable></wd-table-col>
<wd-table-col prop="grade" label="分数" width="220rpx" sortable>
<template #value="{row}">
<view class="custom-class">
<text>{{ row.grade }}</text>
<text>同比{{ row.compare }}</text>
</view>
</template>
</wd-table-col>
<wd-table-col prop="hobby" label="一言以蔽之" :sortable="true"></wd-table-col>
<wd-table-col prop="hobby" label="一言以蔽之" sortable></wd-table-col>
<wd-table-col prop="school" label="求学之所"></wd-table-col>
<wd-table-col prop="major" label="专业"></wd-table-col>
<wd-table-col prop="gender" label="性别"></wd-table-col>
Expand All @@ -149,8 +155,18 @@ function handleSort(e) {

```ts
import { ref } from 'vue'
interface TableData {
name: string
school: string
major: string
gender: string
graduation: string
grade: number
compare: string
hobby: string
}

const dataList = ref<Record<string, any>[]>([
const dataList = ref<TableData[]>([
{
name: '张飞',
school: '武汉市阳逻杀猪学院',
Expand Down Expand Up @@ -232,18 +248,213 @@ function handleSort(e) {
}
```

:::

## 结合分页器使用

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

::: details 查看结合分页器使用demo
```html
<wd-table :data="paginationData" height="auto">
<wd-table-col prop="name" label="姓名" fixed align="center"></wd-table-col>
<wd-table-col prop="grade" label="分数" fixed align="center"></wd-table-col>
<wd-table-col prop="hobby" label="一言以蔽之" :width="160"></wd-table-col>
<wd-table-col prop="school" label="求学之所" :width="180"></wd-table-col>
<wd-table-col prop="major" label="专业"></wd-table-col>
<wd-table-col prop="gender" label="性别"></wd-table-col>
</wd-table>
<wd-pagination custom-style="border: 1px solid #ececec;border-top:none" v-model="page" :total="total"></wd-pagination>
```

```ts
interface TableData {
name: string
school: string
major: string
gender: string
graduation: string
grade: number
compare: string
hobby: string
}

const dataList = ref<TableData[]>([
{
name: '关羽',
school: '武汉市阳逻绿豆学院',
major: '计算机科学与技术专业',
gender: '男',
graduation: '2022年1月12日',
grade: 66,
compare: '48%',
hobby: '颜良文丑，以吾观之，如土鸡瓦犬耳。'
},
{
name: '刘备',
school: '武汉市阳逻编织学院',
major: '计算机科学与技术专业',
gender: '男',
graduation: '2022年1月12日',
grade: 68,
compare: '21%',
hobby: '我得空明，如鱼得水也'
},
{
name: '赵云',
school: '武汉市阳逻妇幼保健学院',
major: '计算机科学与技术专业',
gender: '男',
graduation: '2022年1月12日',
grade: 91,
compare: '12%',
hobby: '子龙，子龙，世无双'
},
{
name: '赵云',
school: '武汉市阳逻妇幼保健学院',
major: '计算机科学与技术专业',
gender: '男',
graduation: '2022年1月12日',
grade: 91,
compare: '12%',
hobby: '子龙，子龙，世无双'
},
{
name: '孔明',
school: '武汉市阳逻卧龙学院',
major: '计算机科学与技术专业',
gender: '男',
graduation: '2022年1月12日',
grade: 99,
compare: '18%',
hobby: '兴汉讨贼，克复中原'
},
{
name: '赵云',
school: '武汉市阳逻妇幼保健学院',
major: '计算机科学与技术专业',
gender: '男',
graduation: '2022年1月12日',
grade: 36,
compare: '48%',
hobby: '子龙，子龙，世无双'
},
{
name: '关羽',
school: '武汉市阳逻绿豆学院',
major: '计算机科学与技术专业',
gender: '男',
graduation: '2022年1月12日',
grade: 66,
compare: '48%',
hobby: '颜良文丑，以吾观之，如土鸡瓦犬耳。'
},
{
name: '刘备',
school: '武汉市阳逻编织学院',
major: '计算机科学与技术专业',
gender: '男',
graduation: '2022年1月12日',
grade: 68,
compare: '21%',
hobby: '我得空明，如鱼得水也'
},
{
name: '赵云',
school: '武汉市阳逻妇幼保健学院',
major: '计算机科学与技术专业',
gender: '男',
graduation: '2022年1月12日',
grade: 91,
compare: '12%',
hobby: '子龙，子龙，世无双'
},
{
name: '孔明',
school: '武汉市阳逻卧龙学院',
major: '计算机科学与技术专业',
gender: '男',
graduation: '2022年1月12日',
grade: 99,
compare: '18%',
hobby: '兴汉讨贼，克复中原'
},
{
name: '赵云',
school: '武汉市阳逻妇幼保健学院',
major: '计算机科学与技术专业',
gender: '男',
graduation: '2022年1月12日',
grade: 36,
compare: '48%',
hobby: '子龙，子龙，世无双'
},
{
name: '关羽',
school: '武汉市阳逻绿豆学院',
major: '计算机科学与技术专业',
gender: '男',
graduation: '2022年1月12日',
grade: 66,
compare: '48%',
hobby: '颜良文丑，以吾观之，如土鸡瓦犬耳。'
},
{
name: '刘备',
school: '武汉市阳逻编织学院',
major: '计算机科学与技术专业',
gender: '男',
graduation: '2022年1月12日',
grade: 68,
compare: '21%',
hobby: '我得空明，如鱼得水也'
},
{
name: '赵云',
school: '武汉市阳逻妇幼保健学院',
major: '计算机科学与技术专业',
gender: '男',
graduation: '2022年1月12日',
grade: 91,
compare: '12%',
hobby: '子龙，子龙，世无双'
},
{
name: '孔明',
school: '武汉市阳逻卧龙学院',
major: '计算机科学与技术专业',
gender: '男',
graduation: '2022年1月12日',
grade: 99,
compare: '18%',
hobby: '兴汉讨贼，克复中原'
}
])
const page = ref<number>(1)
const pageSize = ref<number>(10)

const total = ref<number>(dataList.value.length)

const paginationData = computed(() => {
// 按页码和每页条数截取数据
return dataList.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value)
})
```
:::

## Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ---------- | --------------------------------------------------- | ---------------------------- | ------ | ------ | ---------------- |
| data | 显示的数据 | Array | - | - | 0.0.39 |
| border | 是否带有边框 | boolean | - | true | 0.0.39 |
| stripe | 是否为斑马纹表 | boolean | - | true | 0.0.39 |
| height | Table 的高度，默认为`80vh` | string | - | `80vh` | 0.0.39 |
| rowHeight | 行高 | `number / string` | - | 50 | 0.0.39 |
| showHeader | 是否显示表头 | boolean | - | true | 0.0.39 |
| ellipsis | 是否超出 2 行隐藏 | boolean | - | true | 0.0.39 |
| index | 是否显示索引列，可传入`boolean`也可传入 column 配置 | `boolean / TableColumnProps` | | false | 1.2.19 |
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ---------- | --------------------------------------------------- | ---------------------------- | ------ | ------ | -------- |
| data | 显示的数据 | Array | - | - | 0.0.39 |
| border | 是否带有边框 | boolean | - | true | 0.0.39 |
| stripe | 是否为斑马纹表 | boolean | - | true | 0.0.39 |
| height | Table 的高度，默认为`80vh` | string | - | `80vh` | 0.0.39 |
| rowHeight | 行高 | `number / string` | - | 50 | 0.0.39 |
| showHeader | 是否显示表头 | boolean | - | true | 0.0.39 |
| ellipsis | 是否超出 2 行隐藏 | boolean | - | true | 0.0.39 |
| index | 是否显示索引列，可传入`boolean`也可传入 column 配置 | `boolean / TableColumnProps` | | false | 1.2.19 |

## Events

Expand Down
Loading

0 comments on commit fb7580d

Please sign in to comment.