# 数据页面

在页面中，使用 引入 [`TableData.vue`](https://yaa.docs.speaks.life/he-xin-gong-neng/shu-ju-biao-ge/shu-ju-ye-mian/shu-ju-biao-ge) 文件即可实现。

数据页面包含以下功能

* 搜索、筛选、导出、排序、删除数据
* 增删改查等按钮功能实现

### 示例：

以用户数据为例：

```html
<template>
    <TableData :subHeight="240" ref="tables"
        @view="openModal({ id: $event.id, isEdit: false }, 'formModal')"
        @edit="openModal({ id: $event.id, isEdit: true }, 'formModal')" 
        url="admin/api/user/index"
        :handle="_handleBtn">
    </TableData>
</template>

<script lang="ts">
import TableData from "@/components/common/TableData.vue";

export default defineComponent({
    name: "USER",
    components: { TableData },
})
</script>
```

对应完善php代码即可实现以下效果：

<figure><img src="https://crustipfs.art/ipfs/QmcvP7mAfjx2b7QazpaGYGxhRjbnhR5mMWyRQyM1ovvP37?filename=user-un.jpg" alt=""><figcaption></figcaption></figure>

### 搜索

在 TableData 组件中添加实现 `search` 参数。并将代码修改如下：

```html
<template>
    <TableData :subHeight="240" :search="search" ref="tables"
        @view="openModal({ id: $event.id, isEdit: false }, 'formModal')"
        @edit="openModal({ id: $event.id, isEdit: true }, 'formModal')" 
        url="admin/api/user/index"
        :handle="_handleBtn">

        <n-input v-model:value="search.nickName" filterable placeholder="用户昵称" />
        <n-input v-model:value="search.name" filterable placeholder="姓名" />
        <n-input v-model:value="search.phone" filterable placeholder="手机号码" />
    </TableData>
</template>

<script lang="ts">
import TableData from "@/components/common/TableData.vue";

export default defineComponent({
    name: "USER",
    components: { TableData },

    setup() {
        let search = reactive({
            name: '',
        } as any)
        return {
            search
        }
    },
})
</script>
```

搜索参数为一个对象，尽量在search参数中添加需要搜索的条件，并在php代码中对应处理。

### 筛选

页面默认自带了筛选项，可对应页面数据属性进行筛选、排序操作。

具体修改以及调整可参照 [`筛选`](https://yaa.docs.speaks.life/he-xin-gong-neng/shu-ju-biao-ge/shu-ju-ye-mian/shai-xuan)

### 表格按钮

以上代码中 `handle、_handleBtn` 为按钮处理方法，`view、edit、`分别为数据表格中的查看按钮、编辑按钮的回调方法。

具体参考 [`TableData`](https://yaa.docs.speaks.life/he-xin-gong-neng/shu-ju-biao-ge/shu-ju-ye-mian/shu-ju-biao-ge) 文件方法与属性 。

### 头部按钮

为了统一风格，头部按钮与筛选按钮是连接在一起的。

添加方式如下：

```html
<TableData>
    <template #btn>
        // 如创建按钮
    </template>
</TableData>

```