数据页面

在页面中，使用 引入 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>
​
​
​
​
路由
数据表格
Last modified 9mo ago