ProTable Vue 3 组件库

基于 Ant Design Vue 的高级表格组件，提供开箱即用的企业级表格解决方案。

✨ 特性

• 🚀 开箱即用 - 简单配置即可实现复杂表格功能
• 💎 高级感设计 - 默认卡片式布局，细节打磨，提供极致视觉体验
• 🎯 类型安全 - 完整的 TypeScript 类型定义
• 🎨 灵活定制 - 支持插槽自定义、尺寸调整、样式覆盖
• 📊 数据驱动 - 支持静态数据和异步请求
• 🔍 智能搜索 - 多种搜索类型，自动生成搜索表单
• 📦 功能丰富 - 排序、分页、选择、导出、列设置等

📦 安装

npm install @wangxi-pro/pro-table-vue3
# 或
yarn add @wangxi-pro/pro-table-vue3
# 或
pnpm add @wangxi-pro/pro-table-vue3

🔨 使用

全局注册

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import ProTableVue from '@wangxi-pro/pro-table-vue3';
// 无需手动引入样式，本插件已自动注入
import App from './App.vue';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';

// 配置 dayjs 为中文（日历组件需要）
dayjs.locale('zh-cn');

const app = createApp(App);
app.use(Antd);
app.use(ProTableVue);
// 配置中文语言包（可选，但推荐）
app.provide('locale', zhCN);
app.mount('#app');

或者使用 ConfigProvider 包裹：

<template>
  <a-config-provider :locale="zhCN">
    <ProTable :columns="columns" :request="fetchData" />
  </a-config-provider>
</template>

<script setup lang="ts">
import { ConfigProvider as AConfigProvider } from 'ant-design-vue';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import { ProTable } from '@wangxi-pro/pro-table-vue3';
</script>

局部引入

无需单独引入 style.css，从包中按需导入组件即可自动加载样式：

<template>
  <ProTable
    :columns="columns"
    :request="fetchData"
    row-key="id"
  >
    <template #toolBar>
      <a-button type="primary">新增</a-button>
    </template>
  </ProTable>
</template>

<script setup lang="ts">
import { ProTable, ColumnProps, ResPage } from '@wangxi-pro/pro-table-vue3';

const columns: ColumnProps[] = [
  {
    title: '姓名',
    dataIndex: 'name',
    search: { type: 'text' },
    resizable: true,
    width: 200,
  },
  {
    title: '年龄',
    dataIndex: 'age',
    width: 100,
  },
  {
    title: '状态',
    dataIndex: 'status',
    search: {
      type: 'select',
      options: [
        { label: '启用', value: 'active' },
        { label: '禁用', value: 'inactive' },
      ],
    },
  },
];

const fetchData = async (params: any): Promise<ResPage<any>> => {
  // 调用你的 API
  const res = await fetch('/api/users', {
    method: 'POST',
    body: JSON.stringify(params),
  });
  return res.json();
};
</script>

📖 API

ProTable Props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | columns | 列配置 | ColumnProps[] | [] | | request | 获取数据的函数 | (params: any) => Promise<ResPage<T>> | - | | dataSource | 静态数据源 | T[] | [] | | rowKey | 行唯一键 | string | 'id' | | pagination | 分页配置 | boolean \| object | true | | card | 是否显示卡片样式 | boolean | true | | size | 表格尺寸 | 'large' \| 'middle' \| 'small' | 'middle' | | defaultCollapsed | 默认是否折叠筛选栏 | boolean | true | | collapsedCount | 折叠时显示的筛选数量 | number | 3 |

ProTable Events

| 事件名 | 说明 | 回调参数 | | --- | --- | --- | | update:selectedRowKeys | 选中行变化时触发 | (keys: (string \| number)[]) => void |

ProTable Slots

| 插槽名 | 说明 | 参数 | | --- | --- | --- | | toolBar | 工具栏左侧插槽 | - | | extraToolBar | 工具栏右侧额外操作 | - | | [dataIndex] | 自定义列内容 | { record, text, index } |

ColumnProps

interface ColumnProps<T = any> {
  /** 列标题 */
  title: string;
  /** 数据字段 */
  dataIndex: string;
  /** 唯一键 */
  key?: string;
  /** 列宽度 */
  width?: number | string;
  /** 是否固定列 */
  fixed?: 'left' | 'right';
  /** 是否可调整列宽 */
  resizable?: boolean;
  /** 搜索配置 */
  search?: boolean | SearchProps;
  /** 是否隐藏 */
  hideInTable?: boolean;
}

SearchProps

interface SearchProps {
  /** 搜索项类型 */
  type: 'text' | 'select' | 'tree-select' | 'cascader' | 'date' | 'date-range';
  /** 下拉项数据 */
  options?: any[];
  /** 默认值 */
  defaultValue?: any;
  /** 占位符 */
  placeholder?: string;
}

ResPage

interface ResPage<T> {
  /** 数据列表 */
  list: T[];
  /** 总条数 */
  total: number;
}

🎯 功能示例

1. 基础表格

<ProTable
  :columns="columns"
  :data-source="data"
/>

2. 异步数据

<ProTable
  :columns="columns"
  :request="fetchData"
/>

3. 搜索筛选

const columns: ColumnProps[] = [
  {
    title: '姓名',
    dataIndex: 'name',
    search: { type: 'text' }, // 文本搜索
  },
  {
    title: '状态',
    dataIndex: 'status',
    search: {
      type: 'select', // 下拉选择
      options: [
        { label: '启用', value: 1 },
        { label: '禁用', value: 0 },
      ],
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    search: { type: 'date-range' }, // 日期区间
  },
];

4. 自定义列内容

<ProTable :columns="columns">
  <template #status="{ text }">
    <a-tag :color="text === 1 ? 'green' : 'red'">
      {{ text === 1 ? '启用' : '禁用' }}
    </a-tag>
  </template>
  <template #action="{ record }">
    <a-button type="link" @click="edit(record)">编辑</a-button>
  </template>
</ProTable>

5. 工具栏操作

<ProTable :columns="columns">
  <template #toolBar>
    <a-button type="primary">新增</a-button>
    <a-button danger>批量删除</a-button>
  </template>
</ProTable>

6. 列宽调整

const columns: ColumnProps[] = [
  {
    title: '姓名',
    dataIndex: 'name',
    resizable: true, // 开启列宽调整
    width: 200,
  },
];

使用说明：

• 将鼠标悬停在表头右侧边缘，会出现蓝色的调整手柄
• 按住鼠标左键拖动即可调整列宽
• 最小宽度为 50px

7. 固定列

const columns: ColumnProps[] = [
  {
    title: '操作',
    dataIndex: 'action',
    fixed: 'right', // 固定在右侧
    width: 150,
  },
];

🎨 样式定制

组件使用 Ant Design Vue 的主题系统，可以通过配置主题来定制样式：

import { ConfigProvider } from 'ant-design-vue';

// 在 ConfigProvider 中配置主题
<ConfigProvider
  :theme="{
    token: {
      colorPrimary: '#00b96b',
    },
  }"
>
  <ProTable />
</ConfigProvider>

📝 注意事项

1. 依赖要求

   • Vue 3.x
   • Ant Design Vue 4.x
   • TypeScript (推荐)

2. API 返回格式

   {
     list: [], // 数据列表
     total: 0  // 总条数
   }

3. 分页参数 组件会自动传递以下分页参数：

   {
     pageNum: 1,   // 当前页码
     pageSize: 10  // 每页条数
   }

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 License

MIT

🔗 相关链接

• Ant Design Vue
• Vue 3
• TypeScript