adminPage-vue3依赖TablePage说明文档，表单页快速开发，使用思路及范例（Ⅰ）配置项文档

引入

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汇总

属性

插槽

Exposes

自定义对象

formConfig(array<object> 类型)

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

props（object类型）

tableColumnList(array<object> 类型)

关于搜索逻辑的细节

默认值赋值

搜索功能

重置功能

重置功能

合并对比

Props

searchOver

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

searchConfig

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

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

以下图配置代码为例

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