数据页面
数据页面包含以下功能
- 搜索、筛选、导出、排序、删除数据
- 增删改查等按钮功能实现
以用户数据为例:
<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>
<template #btn>
// 如创建按钮
</template>
</TableData>
Last modified 9mo ago