配置项API
引入
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 'adminpage-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'
},