引入

import { TablePage} from 'adminpage-vue3'

思路介绍

本组件是基于element-UI进行快速搭建搜索列表页的依赖，主干思路为：将异步接口声明到组件的tableApi属性，并将搜索项通过formConfig声明给组件，将搜索、重置、分页的逻辑均交给组件内部去处理，达到最简化的代码实现，对于标准搜索列表页能够进行快速开发。
如下所示，便完成了一个标准搜索列表页的开发

<template><table-page :formConfig="formConfig" :tableApi="getMessageList" ><template #default><el-table-column type="index" label="序号" align="center" width="90" /><el-table-column prop="recieveUserName" label="接收人姓名" align="center" min-width="90" show-overflow-tooltip /><el-table-column prop="recieveUserPhone" label="接收人电话" align="center" min-width="90" show-overflow-tooltip /><el-table-column prop="content" label="内容" align="center" min-width="90" show-overflow-tooltip /><el-table-column prop="createTime" label="提交时间" align="center" min-width="90" show-overflow-tooltip /><el-table-column prop="sendTime" label="发送时间" align="center" min-width="90" show-overflow-tooltip /><el-table-column prop="recieveTime" label="送达时间" align="center" min-width="90" show-overflow-tooltip /><el-table-column prop="recieveStatusVal" label="送达状态" align="center" min-width="90" show-overflow-tooltip /></template></table-page>
</template>
<script setup>import TablePage from 'tablepage-vue3'import { getMessageList } from '@/api/message' // 接口const formConfig= [{label: '时间',type: 'times'},{label: '电话',key: 'phone'}]
</script>
<style lang="scss" scoped></style>

全文档模拟接口的数据结构

  const getMessageList = () => ({total: 5,data: new Array(5).fill({ name: '张三', phone: '13x-xxxx-xxxx' })})

TablePage-vue3 API汇总

属性

属性名	说明	类型	默认值	版本号
tableApi	[必填]表格api【可异步】	Function	Promise.reject()	1.0.0
title	标题	String	当前route的meta?.title	1.0.0
noTitle	无标题标识	Boolean	-	1.0.0
noPage	不显示分页器标识	Boolean	-	1.0.0
noMountedGetData	onMounted 不获取数据标识 ，为true时不会默认调用api接口，需要外部触发getList，但是分页和搜索仍会调用接口	Boolean	-	1.0.0
loading	外部loading传入，与内部loading为<或>的关系	Boolean	-	1.0.0
noSearchModel	无表单搜索标识	Boolean	-	1.0.0
changeToSearch	表单change事件是否触发搜索	Boolean	-	1.0.0
tableHeight	表格高度	Number/String	550	1.0.0
formConfig	搜索项设置 与FromPage一致	Array	[]	1.0.0
changeParams	参数预处理【可异步】	Function	(value) => value	1.0.0
resetFun	重置触发【可异步】	Function	() => {}	1.0.0
tableFileter	表格过渡效果【可异步】	Function	(list) => list	1.0.0
searchOver	搜索完成触发函数	Function	()=>{}	1.0.0
props	配置选项	Object	{}	1.0.0
tableColumnList	表格列list【当default 或 tableShow插槽使用时，将不会使用tableColumnList进行渲染】	Array	[]	1.0.0
paginationProps	分页器配置选项【将element-ui中的pagination相关属性写进该对象里即可】	Object	{}	1.0.0
searchOver	搜索完成触发函数	Function(params)	()=>{}	1.0.0

插槽

插槽名	说明	版本号
buttonModule	按钮	1.0.0
tableTopModule	本插槽位置位于table上方，搜索项下方	1.0.0
default / tableShow	表格展示插槽【当default 或 tableShow插槽使用时，将不会使用tableColumnList进行渲染】	1.0.0
[你设定的slotName]	本组件内部使用了大量的动态组件，方便配置，可阅读文档自行设置插槽名	1.0.0

Exposes

值名	说明	版本号
searchHandler()	执行数据获取	1.0.0
resetHandler()	执行重置逻辑	1.0.0
queryParams	获取页面搜索参数	1.0.0
inputQueryParams	页面输入参数	1.0.0
getParams	接口查询参数	1.0.0
tableList	获取表格数据	1.0.0
TableRef	tableRef对象	1.0.0
updateHandler	执行更新逻辑	1.0.0

自定义对象

formConfig(array<object> 类型)

请查阅FormPage组件的formConfig 配置项
adminPage-vue3依赖FormPage说明文档，表单页快速开发，使用思路及范例——汇总文档

props（object类型）

属性名	说明	类型	默认值	版本号
pageNumKey	接口调用时的当前页码字段	String	page	1.0.0
pageSizeKey	接口调用时的每页显示条目个数字段	String	limit	1.0.0
totalKey	接口调用时的总页数字段	String	count	1.0.0
dataKey	接口调用时的列表数据字段	String	data	1.0.0
pageNumInit	列表默认当前页码	Number	1	1.0.0
pageSizeInit	列表默认每页显示条目个数	Number	10	1.0.0

tableColumnList(array<object> 类型)

属性名	说明	类型	默认值	版本号
slotName	使用插槽嵌入tableColumn，并使用slotName为插槽key	String	-	1.0.0
align	element-UI的 tableColumn中align字段复写默认值	String	center	1.0.0
	element-UI的 tableColumn中的字段均可直接声明			1.0.0
child	子tableColumn，嵌套tableColumn使用	Array	-	1.0.0

关于搜索逻辑的细节

默认值赋值

搜索功能

重置功能

重置功能

合并对比

Props

属性名	说明	类型	默认值
searchOver	搜索完成触发函数	Function(params)	()=>{}

searchOver

searchOver 新增参数params 将搜索相关参数回传给searchOver函数进行处理

searchConfig

searchConfig-type为’times’新增绑定key值

新增字段startKey 与 endKey
时间框选范围第一个值将赋值给params[startKey]，第二个值将赋值给params[endKey]

属性名	说明	类型	默认值
startKey	开始时间Key值	String	startTime
endKey	开始时间Key值	String	endTime

以下图配置代码为例

  {label: '数据时间',type: 'times'},{label: '转发时间',type: 'times',startKey: 'sjzfStartTime',endKey: 'sjzfEndTime'},