vue3 依赖-组件tablepage-vue3说明文档，列表页快速开发，使用思路及范例（Ⅲ）列表项及分页器配置及props配置

github求⭐

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

vue3 依赖-组件tablepage-vue3说明文档，列表页快速开发，使用思路及范例（Ⅱ）搜索及数据获取配置项

vue3 依赖-组件tablepage-vue3说明文档，列表页快速开发，使用思路及范例（Ⅲ）列表项及分页器配置及props配置

vue3 依赖-组件tablepage-vue3说明文档，列表页快速开发，使用思路及范例（Ⅳ）其他配置项

列表项及分页器配置

属性 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 'TablePage-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 'TablePage-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 'TablePage-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 'TablePage-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 'TablePage-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 'TablePage-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 'TablePage-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发送数据时，页码字段
默认值：page

pageSizeKey

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

totalKey

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

dataKey

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

pageNumInit

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

pageSizeInit

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

总结

对应关系可汇总为