表格组件

XYGo Admin 2025-02-20 69 次阅读

ArtTable 和 ArtTableHeader 组件使用指南

表格组件

ArtTable

ArtTable 是对 Element Plus ElTable 的封装，提供统一的样式和加载状态。

基本用法

vue 复制代码

<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>

Props

属性	类型	默认值	说明
data	Array	[]	表格数据
loading	Boolean	false	加载状态

ArtTableHeader

表格头部工具栏，提供刷新按钮和自定义插槽。

vue 复制代码

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

Events

事件	说明
refresh	点击刷新按钮时触发

Slots

插槽	说明
left	左侧操作区域
right	右侧操作区域

完整示例

vue 复制代码

<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">
      <!-- 列定义 -->
    </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>