数据页面

在页面中，使用 引入 TableData.vue 文件即可实现。

数据页面包含以下功能

• 搜索、筛选、导出、排序、删除数据

• 增删改查等按钮功能实现

示例：

以用户数据为例：

<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代码即可实现以下效果：

搜索

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

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

筛选

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

具体修改以及调整可参照 筛选

表格按钮

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

具体参考 TableData 文件方法与属性 。

头部按钮

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

添加方式如下：

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