# 数据页面

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

数据页面包含以下功能

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

### 示例：

以用户数据为例：

```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代码中对应处理。

### 筛选

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

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

### 表格按钮

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

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

### 头部按钮

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

添加方式如下：

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

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yaa.docs.speaks.life/he-xin-gong-neng/shu-ju-biao-ge/shu-ju-ye-mian.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.