@rysharp/ry-table

@rysharp/ry-table

基于 Vue3 + Element Plus 的低代码数据表格组件，从 rysharp 项目 web/src/components/table/* 整体抽取并解耦而成。

特性

• 列设置（拖拽排序、显示勾选、单列编辑、恢复出厂/设为默认）
• 筛选界面（input/date/daterange/monthrange/select/cascader）
• 新增/编辑界面（基于 vform3-builds 的表单设计驱动）
• 打印、导出 Excel
• 顶部按钮手机/PC 自适应
• 按钮权限（v-auth 指令 / 函数式）
• 字典自动渲染标签

安装

pnpm add @rysharp/ry-table
# peerDependencies
pnpm add vue element-plus @element-plus/icons-vue sortablejs print-js xlsx-js-style dayjs axios lodash-es
# 可选（表单设计/编辑功能）
pnpm add vform3-builds

使用

// main.ts
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import VForm3 from 'vform3-builds'; // 可选
import RyTablePlugin from '@rysharp/ry-table';
import '@rysharp/ry-table/dist/style.css';

app.use(ElementPlus).use(VForm3);
app.use(RyTablePlugin, {
  api: {
    getFormDesign: (n) => apiClient.apiSysFormDesignDetialByNameNameGet(n),
    getDefaultHeaderSetting: (t) => apiClient.apiSysFormDesignDefaultHeaderSettingTableNameGet(t),
    setDefaultHeaderSetting: (t, h) => apiClient.apiSysFormDesignSetDefaultHeaderSettingTableNamePost(t, h),
    saveHeaderSetting: (j) => apiClient.apiSysUserSaveHeaderSettingPost(j),
    saveFormDesign: (d) => apiClient.apiSysFormDesignOrUpdatePost(d),
  },
  dict: () => useUserInfo().dictList,
  auth: (code) => useUserInfo().userInfos.authBtnList.includes(code),
  isMobile: () => useThemeConfig().themeConfig.isMobileWidth,
  headerSettings: {
    read: () => useUserInfo().userInfos.headerSettings,
    write: (v) => { useUserInfo().userInfos.headerSettings = v },
  },
});

页面用法与原项目完全一致：

<RyTable tableName="mesProductOrder" :onGetPage="onGetPage" :onAddFormSubmit="..." :onEditFormSubmit="..." />

开发与构建

# 启动 Playground，支持源码热更新和 mock 数据预览
pnpm dev

# 先执行 pnpm build:playground，再预览已经生成的 Playground 静态文件
# 不重新构建，也不提供热更新
pnpm build:playground
pnpm preview

# 生成 npm 组件库产物和 TypeScript 声明文件
pnpm build

pnpm dev 和 pnpm preview 都使用 Vite 作为本地 HTTP 服务。preview 不参与打包，也不需要组件库源码参与运行，但执行命令时仍需要安装 Vite。发布到 npm 的使用方不需要安装 Vite；只需使用包中的 dist 文件。

Playground 位于 playground/，包含完整 mock 数据和接口，可预览分页、筛选、列标题设置、公式字段、添加列、新增、编辑、批量删除、打印和 Excel 导出。

License

MIT