基础表格使用示例

概述

这是一个最简单的表格使用示例，展示了如何使用 useTable Hook 快速创建一个数据表格。

完整代码

<!-- 基础表格 -->
<template>
  <div class="user-page art-full-height">
    <ElCard class="art-table-card" shadow="never">
      <!-- 表格头部（可选，提供刷新、列设置等功能） -->
      <ArtTableHeader v-model:columns="columns" :loading="loading" />

      <!-- 表格 -->
      <ArtTable
        :loading="loading"
        :data="data"
        :columns="columns"
        :pagination="pagination"
        fit
        @pagination:size-change="handleSizeChange"
        @pagination:current-change="handleCurrentChange"
      >
      </ArtTable>
    </ElCard>
  </div>
</template>

<script setup>
  import { useTable } from '@/hooks/core/useTable'
  import { fetchGetUserList } from '@/api/system-manage'

  defineOptions({ name: 'BasicTable' })

  const {
    data,
    columns,
    loading,
    pagination,
    handleSizeChange,
    handleCurrentChange
  } = useTable({
    core: {
      apiFn: fetchGetUserList,
      apiParams: {
        current: 1,
        size: 20
      },
      columnsFactory: () => [
        {
          prop: 'id',
          label: 'ID'
        },
        {
          prop: 'nickName',
          label: '昵称'
        },
        {
          prop: 'userGender',
          label: '性别',
          sortable: true,
          formatter: (row) => row.userGender || '未知'
        },
        {
          prop: 'userPhone',
          label: '手机号'
        },
        {
          prop: 'userEmail',
          label: '邮箱'
        }
      ]
    }
  })
</script>

关键点说明

1. useTable Hook

useTable 是 Art Design Pro 的核心 Hook，提供了表格的完整功能：

const {
  data,              // 表格数据
  columns,           // 列配置
  loading,           // 加载状态
  pagination,        // 分页配置
  handleSizeChange,  // 每页数量变化处理
  handleCurrentChange // 当前页变化处理
} = useTable({...})

2. 列配置

通过 columnsFactory 定义表格列：

columnsFactory: () => [
  {
    prop: 'id',           // 数据字段名
    label: 'ID'           // 列标题
  },
  {
    prop: 'userGender',
    label: '性别',
    sortable: true,       // 启用排序
    formatter: (row) =>   // 自定义格式化
      row.userGender || '未知'
  }
]

3. 样式类

art-full-height: 自动计算页面剩余高度
art-table-card: 符合系统样式的表格卡片，自动撑满剩余高度

常用配置

添加序号列

columnsFactory: () => [
  { type: 'index', width: 60, label: '序号' },
  // ... 其他列
]

添加复选框列

columnsFactory: () => [
  { type: 'selection' },
  // ... 其他列
]

自定义列渲染

使用 formatter 函数自定义列内容：

{
  prop: 'status',
  label: '状态',
  formatter: (row) => {
    return h(ElTag, { type: 'success' }, () => '启用')
  }
}

分页配置

useTable 自动处理分页，默认配置：

// 默认分页参数
apiParams: {
  current: 1,    // 当前页
  size: 20       // 每页数量
}

完整示例位置

src/views/examples/tables/basic.vue