XYGo Admin ArtTable 表格组件：一行代码搞定加载、刷新与分页

做后台管理系统的同学都懂------表格是日常开发里出现频率最高的组件，没有之一。从数据列表到操作日志、从用户管理到订单查询，几乎每个页面都在跟表格打交道。

用原生 Element Plus 写表格倒也不难，但每次都要手写 loading、空状态、分页、刷新按钮这些"标配"，琐碎又重复。今天聊聊 XYGo Admin 里内置的 ArtTable 表格组件，看看它是怎么把这几件事收拢到一起的。

ArtTable：带加载状态的表格封装

ArtTable 本质上是对 Element Plus ElTable 的一层轻封装，最明显的增强就是把 loading 状态内置了进去：

html 复制代码

<template>
  <ArtTable :loading="loading" :data="tableData">
    <ElTableColumn prop="title" label="标题" min-width="200" show-overflow-tooltip />
    <ElTableColumn prop="status" label="状态" width="80" align="center">
      <template #default="{ row }">
        <ElTag :type="row.status === 1 ? 'success' : 'danger'" size="small">
          {{ row.status === 1 ? '正常' : '禁用' }}
        </ElTag>
      </template>
    </ElTableColumn>
    <ElTableColumn label="操作" width="150" fixed="right">
      <template #default="{ row }">
        <ElButton link type="primary" size="small" @click="handleEdit(row)">编辑</ElButton>
        <ElButton link type="danger" size="small" @click="handleDelete(row.id)">删除</ElButton>
      </template>
    </ElTableColumn>
  </ArtTable>
</template>

用法和 ElTable 几乎一模一样，Props 也只多了 data 和 loading 两个。传个布尔值就能控制骨架屏，不用额外写 v-loading 指令。列定义还是用 ElTableColumn，所有 Element Plus 原生属性------sortable、fixed、show-overflow-tooltip------照用不误。

ArtTableHeader：工具栏一步到位

有了表格主体，顶部操作栏也很常见：左边放「新增」「导出」按钮，右边放「刷新」图标。ArtTableHeader 把这个模式固化了：

html 复制代码

<template>
  <ArtTableHeader :loading="loading" @refresh="loadData">
    <template #left>
      <ElButton type="primary" @click="handleAdd">新增</ElButton>
      <ElButton @click="handleExport">导出</ElButton>
    </template>
  </ArtTableHeader>
</template>

就两个插槽------#left 和 #right，外加一个 @refresh 事件。loading 传进去后刷新图标会自动旋转，不需要自己写状态切换逻辑。刷新事件触发后，你在回调里重新调接口 loadData() 就行。

完整组合：表头 → 表格 → 分页

把 ArtTableHeader、ArtTable、ElPagination 串起来，一个标准的列表页就出来了：

html 复制代码

<template>
  <ElCard shadow="never">
    <!-- 工具栏 -->
    <ArtTableHeader :loading="loading" @refresh="loadData">
      <template #left>
        <ElButton type="primary" v-auth="'add'">新增</ElButton>
      </template>
    </ArtTableHeader>

    <!-- 数据表格 -->
    <ArtTable :loading="loading" :data="tableData">
      <ElTableColumn prop="title" label="标题" min-width="200" />
      <ElTableColumn prop="status" label="状态" width="100" align="center" />
      <ElTableColumn label="操作" width="150" fixed="right" />
    </ArtTable>

    <!-- 分页 -->
    <div class="art-pagination">
      <ElPagination
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="loadData"
        @current-change="loadData"
      />
    </div>
  </ElCard>
</template>

三件套组合下来，代码量不多但结构清晰。卡片容器统一视觉、工具栏负责操作入口、表格承载数据、分页控制数据量------这个布局就是 XYGo Admin 里大部分列表页的标配。

为什么选这套方案

后台管理里表格场景大同小异，把 loading 状态、刷新、分页这三件事收敛到组件层，好处很直接：

少写模板代码 ：不用每个页面都写一遍 v-loading、@refresh、分页逻辑
一致的用户体验：所有页面的加载动画、刷新交互、分页布局都是统一的
保留原生灵活性：ElTableColumn 该咋写还咋写，没有学新 API 的成本

XYGo Admin 作为基于 GoFrame + Vue3 的敏捷后台开发框架，在组件封装上做了不少这种"顺手"的设计------不做大而全的抽象，只在最频繁的重复点上做收敛。ArtTable 就是一个很典型的例子。

更多内置组件可以参考官网文档：XYGo Admin 开发文档