代码拉取完成，页面将自动刷新
二次封装element-plus的Table，提供灵活的配置项
简体中文 | English
element-plus Table 的Table-column属性目前只能写在<template></template>模版里，这样不是很灵活，如果表格的column足够多，代码写、看起来很臃肿，但element-plus Virtualized Table 可配置性就很高，为了保持统一，我将Table二次封装并沿用了cellRenderer、headerRenderer这两个自定义渲染器，内置了可通过配置渲染的分页组件，当然还有一些额外的属性，让我们一起探索吧
🦾 灵活度高、强类型: 使用TSX语法编写，拥有强大的类型推导提示和灵活、方便的配置
⚡ 完全可摇树: 自带Tree-Shaking，只对引入的代码进行打包
🫶 代码零侵入: 保持Element-Plus Table 的所有属性、插槽、事件、方法的同时，提供更灵活的配置，而且还内置了可通过配置渲染的分页组件和加载动画以及表格自适应内容区高度等，当然 自定义命名空间 也不会受到任何影响
🌍 国际化友好: 内置三种精简的国际化（简体中文：zhCn、繁体中文：zhTw、英语: en），提供三种国际化配置方法，使其配置更灵活、方便。当然也可以结合 vue-i18n ，让表格自适应国际化语言
💚 SSR友好: 完全兼容Nuxt3
📡 可通过CDN引用: 同时支持jsdelivr和unpkg
npm install @pureadmin/table
# or
yarn add @pureadmin/table
# or
pnpm add @pureadmin/table
CDN
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@pureadmin/table/dist/style.css" />
<script src="//cdn.jsdelivr.net/npm/@pureadmin/table"></script>
<!-- or -->
<link rel="stylesheet" href="//unpkg.com/@pureadmin/table/dist/style.css" />
<script src="//unpkg.com/@pureadmin/table"></script>
import "@pureadmin/table/dist/style.css";
import { PureTable } from "@pureadmin/table";
<pure-table locale="zhCn" :data="dataList" :columns="columns" :pagination="pagination"></pure-table>
import { createApp } from "vue";
import App from "./App.vue";
import "@pureadmin/table/dist/style.css";
import PureTable from "@pureadmin/table";
const app = createApp(App);
app.use(PureTable, { locale: "zhCn" }).mount("#app");
点击查看按需、全局、自定义命名空间、nuxt3以及Html文件引入的用法示例
Volar支持如果您在使用 Volar，那么可以在 tsconfig.json 中配置 compilerOptions.types 来指定全局组件类型（尤其是全局注册时要想获得类型提示就需要加上下面配置）
// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["@pureadmin/table/volar"]
}
}
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
