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 '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'
  },

全文档的模拟接口结构

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

搜索及数据获取配置项

属性： noSearchModel（无表单搜索标识）

该属性为true时，将不会显示表单项（以及属于表单的按钮项也不会显示），但是列表和属于列表的分页器将正常展示

<template>
  <table-page noSearchModel :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: '电话',
      type:'input',
      key: 'phone'
    }
  ]
</script>

属性：changeToSearch（表单change事件是否触发搜索 ）

此属性为true时，当搜索项被触发change事件时，将会立即执行搜索逻辑，无需用户手动点击搜索按钮

<template>
  <table-page changeToSearch :formConfig="formConfig" :tableApi="getMessageList" >
    <template #default>
	...
	// 与前文一致，省略处理
	...
    </template>
  </table-page>
</template>
<script setup>
  import { TablePage} from 'adminpage-vue3'
  import { getMessageList } from '@/api/message' // 接口
  const formConfig= [
    {
      label: '时间',
      type: 'times'
    },
    {
      label: '电话',
      type:'input',
      key: 'phone'
    }
  ]
</script>

属性： changeParams（参数预处理【可异步】 ）

该属性接收函数，将传入即将用于搜索的数据，数据经过该函数处理后需要返回，否则将仍使用原始数据进行搜索

<template>
  <table-page :changeParams="changeParams":formConfig="formConfig" :tableApi="getMessageList" >
    <template #default>
	...
	// 与前文一致，省略处理
	...
    </template>
  </table-page>
</template>
<script setup>
  import { TablePage} from 'adminpage-vue3'
  import { getMessageList } from '@/api/message' // 接口
  const formConfig= [
    {
      label: '时间',
      type: 'times'
    },
    {
      label: '电话',
      type:'input',
      key: 'phone'
    }
  ]
  function changeParams(data) {
    data.changeParams = true
    return data
  }
</script>

模式	函数处理	数据结构
无处理	<table-page :formConfig=“formConfig” :tableApi=“getMessageList” >
同步处理返回
异步处理返回
无返回

属性： resetFun（重置触发【可异步】）

当需要重置时处理其他业务时，可声明resetFun属性，该属性接收函数，可异步处理，待处理完成后继续向下执行搜索逻辑
该函数触发时机为：搜索字段已完成重置，尚未请求接口时
即：

重置字段初始值
resetFun（）
请求接口

<template>
  <table-page :resetFun="resetFun":formConfig="formConfig" :tableApi="getMessageList" >
    <template #default>
	...
	// 与前文一致，省略处理
	...
    </template>
  </table-page>
</template>
<script setup>
  import { TablePage} from 'adminpage-vue3'
  import { getMessageList } from '@/api/message' // 接口
  const formConfig= [
    {
      label: '时间',
      type: 'times'
    },
    {
      label: '电话',
      type:'input',
      key: 'phone'
    }
  ]
  function resetFun() {
  	// 处理业务逻辑
  }
</script>

属性： tableFileter（表格过渡效果【可异步】）

该属性接收函数，传入接口返回的数据列表，经该函数处理后将渲染至页面，函数可为异步函数，当函数不返回数据时，将使用接口数据进行渲染

<template>
  <table-page :tableFileter="tableFileter" :formConfig="formConfig" :tableApi="getMessageList" >
	...
	// 与前文一致，省略处理
	...
  </table-page>
</template>
<script setup>
  import { TablePage} from 'adminpage-vue3'
  import { getMessageList } from '@/api/message' // 接口
  const formConfig= [
    {
      label: '时间',
      type: 'times'
    },
    {
      label: '电话',
      type:'input',
      key: 'phone'
    }
  ]
  async function tableFileter(list) {
    await new Promise((resolve) => setTimeout(() => resolve(), 5000)) //等待五秒后向下执行
    return list.map((item, index) => ({ ...item, recieveUserName: index % 2 ? '张三' : '李四' }))
  }
</script>

属性： searchOver（搜索完成触发）

搜索完成触发，此时tableList已经赋值完成

<template>
  <table-page :searchOver="searchOver" :formConfig="formConfig" :tableApi="getMessageList" >
	...
	// 与前文一致，省略处理
	...
  </table-page>
</template>
<script setup>
  import { TablePage} from 'adminpage-vue3'
  import { getMessageList } from '@/api/message' // 接口
  const formConfig= [
    {
      label: '时间',
      type: 'times'
    },
    {
      label: '电话',
      type:'input',
      key: 'phone'
    }
  ]
 function searchOver() {
  	// 处理业务逻辑
  }
</script>

插槽： buttonModel

本插槽位置位于搜索按钮右侧，方便放置业务按钮

<template>
  <table-page  :formConfig="formConfig" :tableApi="getMessageList" >
    <template #buttonModel>
      <el-button type="primary">buttonModel</el-button>
    </template>
    <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: '电话',
      type:'input',
      key: 'phone'
    }
  ]
</script>

formProps

新增属性formProps 该属性可参考属性 paginationProps 是将声明到本属性的对象，绑定到组件内部的ElForm标签上
接收对象

<template>
  <table-page :formConfig="formConfig" :tableApi="getMessageList" :formProps="{labelWidth:'200px',disabled:true	}">
    <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>

列表项及分页器配置

属性 tableHeight

本属性与elementUI-table 的 tableHeight 一致，所不同的是，本组件设置tableHeight默认值为550

属性 tableColumnList 与 插槽 default / 插槽 tableShow

属性 tableColumnList

本组件可以通过 tableColumnList属性配置分页器，达到dom最简化的效果，同时本配置项支持嵌套多层级效果
对于需要绑定到ElTableColumn标签上的属性，可以直接声明到对应对象内

<template>
  <TablePage :tableApi="getMessageList" :tableColumnList="tableColumnList" />
</template>
<script setup>
  import { TablePage} from 'adminpage-vue3'
  const getMessageList = () => ({
    total: 5,
    data: new Array(5).fill({ name: '张三', phone: '13x-xxxx-xxxx' })
  })
  const tableColumnList = [
    { type: 'index', label: '序号', width: '90' },
    { prop: 'name', label: '姓名', minWidth: '90', showOverflowTooltip: true },
    { prop: 'phone', label: '电话', minWidth: '90', showOverflowTooltip: true }
  ]
</script>

其效果等效于

<template>
  <TablePage :tableApi="getMessageList">
    <template #default>
      <el-table-column type="index" label="序号" align="center" width="90" />
      <el-table-column prop="name" label="姓名" align="center" min-width="90" show-overflow-tooltip />
      <el-table-column prop="phone" label="电话" align="center" min-width="90" show-overflow-tooltip />
    </template>
  </TablePage>
</template>
<script setup>
  import { TablePage} from 'adminpage-vue3'
  const getMessageList = () => ({
    total: 5,
    data: new Array(5).fill({ name: '张三', phone: '13x-xxxx-xxxx' })
  })
</script>

嵌套多层级 child

当需要多层级表单时，可以使用 child属性，其内部结构与tableColumnList一致，但是他将被包裹在父级的ElTableColumn里，以达成嵌套效果

<template>
  <TablePage :tableApi="getMessageList" :tableColumnList="tableColumnList" />
</template>
<script setup>
  import { TablePage} from 'adminpage-vue3'
  const getMessageList = () => ({
    total: 5,
    data: new Array(5).fill({ name: '张三', phone: '13x-xxxx-xxxx' })
  })
  const tableColumnList = [
    { type: 'index', label: '序号', width: '90' },
    {
      label: '用户信息',
      child: [
        { prop: 'name', label: '姓名', minWidth: '90', showOverflowTooltip: true },
        { prop: 'phone', label: '电话', minWidth: '90', showOverflowTooltip: true }
      ]
    },
    { prop: 'tm', label: '时间', minWidth: '180', showOverflowTooltip: true }
  ]
</script>

既等效于

<template>
  <TablePage :tableApi="getMessageList">
    <template #default>
      <el-table-column type="index" label="序号" align="center" width="90" />
      <el-table-column label="用户" align="center">
        <el-table-column prop="name" label="姓名" align="center" min-width="90" show-overflow-tooltip />
        <el-table-column prop="phone" label="电话" align="center" min-width="90" show-overflow-tooltip />
      </el-table-column>
      <el-table-column prop="tm" label="时间" align="center" min-width="180" show-overflow-tooltip />
    </template>
  </TablePage>
</template>
<script setup>
  import { TablePage} from 'adminpage-vue3'
  const getMessageList = () => ({
    total: 5,
    data: new Array(5).fill({ name: '张三', phone: '13x-xxxx-xxxx' })
  })
</script>

插槽 slotName

当某项需要使用插槽时，可以单独传入slotName 声明插槽名，组件也将ElTableColumn传给row的相关字段传给该插槽

<template>
  <TablePage border :tableApi="getMessageList" :tableColumnList="tableColumnList">
    <template #columnSlot="{ row }"> {{ row }} </template>
  </TablePage>
</template>
<script setup>
  import { TablePage} from 'adminpage-vue3'
  const getMessageList = () => ({
    total: 5,
    data: new Array(5).fill({ name: '张三', phone: '13x-xxxx-xxxx' }).map((item, index) => ({ ...item, index }))
  })
  const tableColumnList = [
    { type: 'index', label: '序号', width: '90' },
    { prop: 'name', label: '姓名', minWidth: '90', showOverflowTooltip: true },
    { slotName: 'columnSlot', label: '插槽', minWidth: '90' }
  ]
</script>

插槽 default / 插槽 tableShow

插槽 default 与 插槽 tableShow效果相同，可根据使用习惯使用

优先级

优先级为 插槽 default > 插槽 tableShow>属性 tableColumnList

属性 noPage

声明noPage，将隐藏分页器，既无法分页

<template>
  <TablePage noPage :tableApi="getMessageList">
    <template #default>
      <el-table-column type="index" label="序号" align="center" width="90" />
      <el-table-column prop="name" label="姓名" align="center" min-width="90" show-overflow-tooltip />
      <el-table-column prop="phone" label="电话" align="center" min-width="90" show-overflow-tooltip />
    </template>
  </TablePage>
</template>
<script setup>
  import { TablePage} from 'adminpage-vue3'
  const getMessageList = () => ({
    total: 5,
    data: new Array(5).fill({ name: '张三', phone: '13x-xxxx-xxxx', tm: '2024-04-12' })
  })
</script>

属性 paginationProps

需要配置到分页器标签的相关属性，可以声明到paginationProps内，组件内部将获取相关属性

<template>
  <TablePage :tableApi="getMessageList" :paginationProps="paginationProps">
    <template #default>
      <el-table-column type="index" label="序号" align="center" width="90" />
      <el-table-column prop="name" label="姓名" align="center" min-width="90" show-overflow-tooltip />
      <el-table-column prop="phone" label="电话" align="center" min-width="90" show-overflow-tooltip />
    </template>
  </TablePage>
</template>
<script setup>
  import { TablePage} from 'adminpage-vue3'
  const getMessageList = () => ({
    count: 100,
    data: new Array(10).fill({ name: '张三', phone: '13x-xxxx-xxxx', tm: '2024-04-12' })
  })
  const paginationProps = {
    background: true,
    layout: 'prev, pager, total, next'
  }
</script>

其底部分页渲染相当于

  <el-pagination
    v-model:currentPage="currentPage"
    v-model:page-size="pageSize"
    :total="total"
    layout='prev, pager, total, next'
    :background="true"
  />

ElTable的其他相关属性

对于需要向ElTable写入的属性，可以直接写到本组件上，内部将穿透给ElTable
例：想要获得<el-table row-class-name="rowClassName">的效果，可以使用<table-page-vue3 row-class-name="rowClassName" >来实现
对于想要触发ElTable的事件，可以获取本组件抛出的tableRef对象触发，例如想要触发ElTable的setCurrentRow方法
可以 <TablePage ref="TablePageRef">声明完ref对象后通过TablePageRef.value.TableRef.setCurrentRow()触发

props配置

字段	说明	类型	默认值	版本号
pageNumKey	向tableApi发送数据时，页码字段	String	‘page’	1.0.0
pageSizeKey	向tableApi发送数据时，单页数据量字段	String	‘limit’	1.0.0
totalKey	接收tableApi返回数据时，获取数据总量字段	String	‘count’	1.0.0
dataKey	接收tableApi返回数据时，获取列表数据字段	String	‘data’	1.0.0
pageNumInit	初始化page页面为第几页	Number	1	1.0.0
pageSizeInit	初始化page页面，每页数据量	Number	10	1.0.0

pageNumKey

本字段作用于向tableApi发送数据时，页码字段
默认值：page

pageSizeKey

本字段作用于向tableApi发送数据时，单页数据量字段
默认值：limit

totalKey

本字段作用于接收tableApi返回数据时，获取数据总量字段
默认值：count

dataKey

本字段作用于接收tableApi返回数据时，获取列表数据字段
默认值：data

pageNumInit

本字段作用于初始化page页面为第几页
默认值：1

pageSizeInit

本字段作用于初始化page页面，每页数据量
默认值：10

总结

对应关系可汇总为

其他配置项

title

设置左上角的title 文案，默认将会从路由配置中读取meta.title

      {
        path: 'message',
        name: 'message',
        meta: { title: '短信发送' },
        component: () => import('@/views/Message/index.vue')
      },

亦可自己手动配置

<template>
  <TablePage title="DIYtitle" :tableApi="getMessageList">
    <template #default>
      <el-table-column type="index" label="序号" align="center" width="90" />
      <el-table-column prop="name" label="姓名" align="center" min-width="90" show-overflow-tooltip />
      <el-table-column prop="phone" label="电话" align="center" min-width="90" show-overflow-tooltip />
    </template>
  </TablePage>
</template>
<script setup>
  import { TablePage} from 'adminpage-vue3'
  const getMessageList = () => ({
    total: 5,
    data: new Array(5).fill({ name: '张三', phone: '13x-xxxx-xxxx' })
  })
</script>

noTitle

如果不想配置title，可以声明noTitle 取消显示

<template>
  <TablePage noTitle :tableApi="getMessageList">
    <template #default>
      <el-table-column type="index" label="序号" align="center" width="90" />
      <el-table-column prop="name" label="姓名" align="center" min-width="90" show-overflow-tooltip />
      <el-table-column prop="phone" label="电话" align="center" min-width="90" show-overflow-tooltip />
    </template>
  </TablePage>
</template>
<script setup>
  import { TablePage} from 'adminpage-vue3'
  const getMessageList = () => ({
    total: 5,
    data: new Array(5).fill({ name: '张三', phone: '13x-xxxx-xxxx' })
  })
</script>

noMountedGetData

在部分业务场景中，你并不想在加载页面时立即调用接口，可以声明noMountedGetData属性为true，此时组件内部将不会在onMounted获取数据，
注意：此属性不会影响搜索、重置、页码切换时调用接口，尽管声明了noMountedGetData属性为true，但搜索、重置、页码切换时组件仍然会请求接口

loading

在一些业务情景下，可能想让table的loading因外部事件而显示，此时可以传入loading，本属性接收Boolean类型，当为true时，列表页将会显示loading，对于loading所需配置，亦可直接声明到组件上

<template>
  <TablePage loading element-loading-text="数据加载中..." :tableApi="getMessageList">
    <template #default>
      <el-table-column type="index" label="序号" align="center" width="90" />
      <el-table-column prop="name" label="姓名" align="center" min-width="90" show-overflow-tooltip />
      <el-table-column prop="phone" label="电话" align="center" min-width="90" show-overflow-tooltip />
    </template>
  </TablePage>
</template>
<script setup>
  import { TablePage} from 'adminpage-vue3'
  const getMessageList = () => ({
    total: 5,
    data: new Array(5).fill({ name: '张三', phone: '13x-xxxx-xxxx' })
  })
</script>