fs821031547 / pure-admin-table

使用tsx语法二次封装element-plus的Table，提供灵活的配置项

@pureadmin/table

二次封装element-plus的Table，提供灵活的配置项

简体中文 | English

• 预览地址

🤔 开发初衷

• element-plus Table 的Table-column属性目前只能写在<template></template>模版里，这样不是很灵活，如果表格的column足够多，代码写、看起来很臃肿，但element-plus Virtualized Table 可配置性就很高，为了保持统一，我将Table二次封装并沿用了cellRenderer、headerRenderer这两个自定义renderer，内置了可通过配置渲染的分页组件，当然还有一些额外的属性，让我们一起探索吧

🚀 特性

• 🦾 灵活度高: 使用tsx语法编写，保证类型的同时，给开发者提供了更灵活的写法，给使用者提供了更方便的配置
• ⚡ 完全可摇树: 自带Tree-shaking，只对引入的代码进行打包
• 🫶 代码零侵入: 保持element-plus Table 的所有属性、插槽、事件、方法的同时，提供更灵活的配置，而且还内置了可通过配置渲染的分页组件
• ⚓ 代码提交前校验: 使用 husky 对提交代码前进行规则校验，强制规范开发流程，防止开发失误

📦 安装

npm install @pureadmin/table
or 
pnpm add @pureadmin/table

🦄 用法

局部注册（单文件）

import { PureTable } from "@pureadmin/table";

<pure-table :data="dataList" :columns="columns" :pagination="pagination"></pure-table>

全局注册（main.ts）

import { createApp } from "vue";
import App from "./App.vue";

import Table from "@pureadmin/table";

const app = createApp(App);

app.use(Table).mount("#app");

点击查看具体用法

Volar 支持

• 如果您在使用 Volar，那么可以在 tsconfig.json 中配置 compilerOptions.types 来指定全局组件类型（尤其是全局注册时要想获得类型提示就需要加上下面配置）

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["@pureadmin/table/volar"]
  }
}

许可证

MIT © xiaoxian521-2022