Vue Ace Admin

Appearance

ProTable 表格 ​

ProTable 是基于 Ant Design Vue Table 组件扩展的增强型表格，支持斑马纹行、卡片包装器和工具栏插槽，完全兼容原生 <a-table> 的所有属性和插槽。

代码示例 ​

基础用法 ​

斑马纹行 ​

通过 isZebra 属性控制斑马纹样式，可选 'none'（无）、'even'（偶数行）、'odd'（奇数行）。

自定义斑马纹配色 ​

ProTable 内置两个 CSS 变量用于控制斑马纹颜色，业务可在全局样式中覆盖：

  • --ace-pro-table-zebra-bg-light（默认 #f6f6f6）：亮色主题下的背景色
  • --ace-pro-table-zebra-bg-dark（默认 rgb(29 29 29)）：暗色主题下的背景色
vue
<template>
  <ProTable :columns="columns" :dataSource="data" isZebra="even" />
</template>

<style scoped>
:root {
  --ace-pro-table-zebra-bg-light: #fff7e6;
  --ace-pro-table-zebra-bg-dark: #2a1f15;
}
</style>

如果项目存在暗色主题容器，也可以单独覆盖：

css
[data-theme='dark'] {
  --ace-pro-table-zebra-bg-dark: rgba(255, 255, 255, 0.08);
}

卡片包装器 ​

通过 useCardWrapper 属性控制是否使用卡片包装表格，默认开启。

工具栏插槽 ​

可通过 toolbar 插槽自定义表格工具栏内容。

完整示例（真实 API） ​

结合 useList 实现完整的分页、加载、CRUD 功能。

Props ​

属性名类型默认值说明
isZebra'none' | 'even' | 'odd''none'斑马纹行样式控制
useCardWrapperbooleantrue是否使用卡片包装器
其他属性同 a-table-支持所有原生 a-table 属性

💡 ProTable 内部直接透传了 Ant Design Vue 的 Table props，可以像使用原生 <a-table> 一样 v-bind：

vue
<script setup>
import { reactive } from 'vue'

const tableOptions = reactive({
  columns,
  dataSource,
  pagination: { current: 1, pageSize: 10 },
  isZebra: 'even'
})
</script>

<template>
  <ProTable v-bind="tableOptions" />
</template>

Slots ​

插槽名说明
toolbar表格上方工具栏内容
其他插槽同原生 a-table，支持全部插槽

说明 ​

核心特性 ​

  • ✅ 斑马纹样式 - 自动适配 light/dark 主题
  • ✅ 卡片包装 - 可选是否使用卡片包裹表格
  • ✅ 工具栏插槽 - 灵活的工具栏区域
  • ✅ 完全兼容 - 支持所有 Ant Design Vue Table 的属性和插槽
  • ✅ 插槽透传 - 所有表格插槽自动转发

斑马纹实现 ​

css
/* 亮色主题 */
[data-theme='light'] .ant-table-striped .table-striped td {
  background-color: #f6f6f6;
}

/* 暗色主题 */
[data-theme='dark'] .ant-table-striped .table-striped td {
  background-color: rgb(29 29 29);
}

常用插槽 ​

插槽名说明参数
toolbar工具栏区域-
bodyCell自定义单元格{ text, record, index, column }
headerCell自定义表头单元格{ title, column }
expandedRowRender展开行内容{ record, index }
summary总结栏{ pageData }

与 useList 配合使用 ​

vue
<script setup>
const { dataSource, loading, curPage, pageSize, total } = useList({
  request: async (params) => {
    // API 请求
    return { data: [...], total: 100 }
  },
  extra: {
    immediate: true
  }
})
</script>

<template>
  <ProTable
    :dataSource="dataSource"
    :loading="loading"
    :pagination="{ current: curPage, pageSize, total }"
  />
</template>

最佳实践 ​

  1. 滚动配置（scroll）

    ✅ 推荐：使用 x: 'max-content' ​

    vue
    <ProTable
  :columns="columns"
  :dataSource="dataSource"
  :scroll="{ x: 'max-content' }"
/>

    优点：

    • ✅ 自动根据列宽度计算
    • ✅ 响应式适配
    • ✅ 不会浪费空间

    ❌ 不推荐：写死宽度 ​

    vue
    :scroll="{ x: 1500, y: 300 }"  <!-- ❌ 写死宽度，不灵活 -->

    📋 何时使用不同的 scroll 配置 ​

    场景配置说明
    一般表格不设置或 { x: 'max-content' }自适应容器
    列很多{ x: 'max-content' }自动横向滚动
    固定表头{ y: 400 }超过高度纵向滚动
    列多+固定表头{ x: 'max-content', y: 400 }双向滚动
    大数据虚拟滚动{ x: 'max-content', y: 600 } + :virtual="true"性能优化

  2. 分页配置

    vue
    :pagination="{
  current: curPage,
  pageSize: pageSize,
  total: total,
  showSizeChanger: true,      // 显示页大小选择器
  showQuickJumper: true,      // 显示快速跳转
  showTotal: (total) => `共 ${total} 条`
}"

  3. 固定列

    typescript
    const columns = [
  { title: 'ID', dataIndex: 'id', fixed: 'left', width: 60 },
  { title: '操作', key: 'action', fixed: 'right', width: 200 }
]

  4. 行选择

    vue
    :row-selection="{
  selectedRowKeys: selectedKeys,
  onChange: onSelectChange
}"

相关文档 ​