@your-scope/pro-table

Vue3 + Element Plus 增强表格组件，支持搜索表单、分页、列设置、多选、拖拽排序等。

安装

npm i @your-scope/pro-table
# 或
pnpm add @your-scope/pro-table

依赖：请确保项目已安装 vue@^3.3、element-plus@^2.4、@element-plus/icons-vue。表格内部使用 sortablejs、vuedraggable，已作为 dependencies 安装。

样式：包内已包含 ProTable 所需的全局样式（.card、.table-main、.table-search、.table-header 等），引入包样式后即可正常显示，无需在业务项目中再写一套。若项目已定义 --gray-* 等变量，会优先使用项目的；未定义时使用 Element Plus 变量作为 fallback。

使用

全局注册

import ProTable from "@your-scope/pro-table";
import "@your-scope/pro-table/style.css"; // 若有打包样式

app.component("ProTable", ProTable);

按需使用

<template>
  <ProTable
    :columns="columns"
    :request-api="getList"
    row-key="id"
  />
</template>
<script setup>
import ProTable from "@your-scope/pro-table";
import "@your-scope/pro-table/style.css";

const columns = [
  { prop: "name", label: "姓名", search: { el: "input" } },
  { prop: "status", label: "状态", enum: statusOptions, tag: true },
  { prop: "operation", label: "操作", fixed: "right" },
];
const getList = (params) => api.getList(params); // 需返回 { data, totalElements }
</script>

权限按钮（可选）

若需要与项目权限体系对接（操作列按钮权限），在 ProTable 外层 provide 当前页允许的按钮码列表：

import { ref } from "vue";
const authButtons = ref(["add", "edit", "delete"]); // 从权限接口或 store 获取
provide("proTableAuthButtons", authButtons);

不 provide 时，操作列所有按钮均展示。

Props / 事件 / 插槽

与现有 ProTable 保持一致，如：columns、requestApi、requestAuto、pagination、rowKey、searchCol、toolButton 等；事件 search、reset、dargSort、create；插槽 tableHeader、selectButton、pagination、empty 及各列插槽。

构建与发布 npm

在 packages/pro-table 目录下：

pnpm install
pnpm build

发布前请将 package.json 中 name 改为你的 scope 或包名（如 @myorg/pro-table 或 my-pro-table），然后：

npm login
npm publish

若为 scoped 且公开发布：npm publish --access public。

从当前项目迁移

若从本仓库的 src/components/ProTable 迁移到该包，只需将页面中的：

• import ProTable from "@/components/ProTable/index.vue"
  改为
• import ProTable from "@your-scope/pro-table"
  并引入样式（若需要）。列配置、API 入参/出参、插槽名保持不变即可。