同步操作将从 zym/pure-admin-table 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
二次封装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
CDN
<script src="https://unpkg.com/@pureadmin/table"></script>
or
<script src="https://cdn.jsdelivr.net/npm/@pureadmin/table"></script>
import { PureTable } from "@pureadmin/table";
<pure-table :data="dataList" :columns="columns" :pagination="pagination"></pure-table>
import { createApp } from "vue";
import App from "./App.vue";
import Table from "@pureadmin/table";
const app = createApp(App);
app.use(Table).mount("#app");
如果您在使用 Volar
,那么可以在 tsconfig.json
中配置 compilerOptions.types
来指定全局组件类型(尤其是全局注册时要想获得类型提示就需要加上下面配置)
// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["@pureadmin/table/volar"]
}
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。