数据页面

在页面中,使用 引入 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 1yr ago