jtfl2008 / pure-admin-table

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

@pureadmin/table

Secondary encapsulation of element-plus Table, providing flexible configuration items

English | 简体中文

• Preview

🤔 Original intention of development

• element-plus Table Table-column attribute can only be written in the <template></template> template at present, which is not very flexible. If the table has enough column, the code is written and looks bloated, but element-plus Virtualized Table The configurability is very high. In order to maintain unity, I encapsulated Table twice and used cellRenderer, headerRenderer These two custom renderers, Built-in Pagination component that can be rendered by configuration, of course, there are some additional properties, let's explore together

🚀 Features

• 🦾 High flexibility: Written using tsx syntax, while ensuring the type, it provides developers with more flexible writing methods and provides users with more convenient configuration
• ⚡ Fully tree-shaking: Comes with Tree-shaking, only packages the imported code
• 🫶 Code Zero Intrusion: While keeping all properties, slot, events and methods of element-plus Table, Provides more flexible configuration, It also has built-in Pagination components that can be rendered by configuration
• ⚓ Verification before code submission: Use husky to verify the rules before submitting code, enforce standard development process and prevent development mistakes

📦 Install

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

🦄 Usage

Partial registration (single file)

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

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

Global registration (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");

Click to view the specific usage

Volar support

• If you are using Volar, you can configure compilerOptions.types in tsconfig.json to specify the global component type (especially if you want to get type hints during global registration, you need to add the following configuration)

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

License

MIT © xiaoxian521-2022