The TablePage component for Vue3 offers several configuration options beyond basic table setup. These properties allow customization of title display, data fetching behavior, and loading states to suit various application requirements.

Title Configuration

By default, the component retrieves the title from the route's meta.title property. For example, in a route configuration:

{
  path: 'notifications',
  name: 'notifications',
  meta: { title: 'Notification Management' },
  component: () => import('@/views/Notifications/index.vue')
}

Alternatively, you can manually specify a title using the title prop:

<template>
  <TablePage title="Custom Page Title" :tableApi="fetchNotificationData">
    <template #default>
      <el-table-column type="index" label="ID" align="center" width="80" />
      <el-table-column prop="recipient" label="Recipient" align="center" min-width="100" show-overflow-tooltip />
      <el-table-column prop="content" label="Content" align="center" min-width="120" show-overflow-tooltip />
    </template>
  </TablePage>
</template>

<script setup>
import TablePage from 'TablePage-vue3'

const fetchNotificationData = () => ({
  total: 8,
  data: Array(8).fill({ recipient: 'John Doe', content: 'Sample notification message' })
})
</script>

Disabling Title Display

To hide the title section entirely, set the noTitle prop:

<template>
  <TablePage noTitle :tableApi="fetchNotificationData">
    <template #default>
      <el-table-column type="index" label="ID" align="center" width="80" />
      <el-table-column prop="recipient" label="Recipient" align="center" min-width="100" show-overflow-tooltip />
      <el-table-column prop="content" label="Content" align="center" min-width="120" show-overflow-tooltip />
    </template>
  </TablePage>
</template>

<script setup>
import TablePage from 'TablePage-vue3'

const fetchNotificationData = () => ({
  total: 8,
  data: Array(8).fill({ recipient: 'John Doe', content: 'Sample notification message' })
})
</script>

Controlling Initial Data Fetch

In scenarios where immediate data loading on component mount is undesirable, set noMountedGetData to true. This prevents the initial API call during onMounted while preserving data fetching during search, reset, and pagination operations.

Custom Loading State Management

External control over the table's loading indicator is possible through the loading prop. When set too true, the loading overlay activates. Additional loading configurations can be applied directly to the component:

<template>
  <TablePage loading element-loading-text="Loading data..." :tableApi="fetchNotificationData">
    <template #default>
      <el-table-column type="index" label="ID" align="center" width="80" />
      <el-table-column prop="recipient" label="Recipient" align="center" min-width="100" show-overflow-tooltip />
      <el-table-column prop="content" label="Content" align="center" min-width="120" show-overflow-tooltip />
    </template>
  </TablePage>
</template>

<script setup>
import TablePage from 'TablePage-vue3'

const fetchNotificationData = () => ({
  total: 8,
  data: Array(8).fill({ recipient: 'John Doe', content: 'Sample notification message' })
})
</script>