用装饰器和ElementPlus，我们在NPM发布了这个好用的表格组件包 前言?如果你恰好也在使用「TypeScript」、「Vue3」、「ElementPlus」，那么这个组件包你可以看看。 ?之前我们在一些文章里提到过如何使用「装饰器」来配置表格，也开源了一个「AirPower4T」的开源项目，但后来很多人反馈说，用子仓库的方式使用有些不太方便？ 于是我们将「AirPower4T」这个项目做了拆分，分别独立成了下面的几个包： 「AirPower-Transformer」核心的数据转换库，类似class-transformer的封装。 「AirPower-Enum」核心的枚举封装库，这个也在之前的文章中提到过。 「AirPower-i18n」核心的国际化封装库，在我们关于 I18n 的文章中也提到过。 「AirPower-Util」核心的工具封装库。 「AirPower-Web」「AirPower4T」的下一个库，做了解耦设计。 我们今天主要讲的是「AirPower-Web」这个库，这个库提供了「AirPower-Web」的核心功能，并且还封装了「ElementPlus」的一些组件，这样，「AirPower-Web」就可以作为替代「AirPower4T」的一个库使用。 我们今天要实现的表格是下面这个图： 快速开始初始化项目我们就不再提了，这里我们从安装包开始： 安装 @airpower/web可以选择你喜欢的方式安装： npm install @airpower/web # or yarn add @airpower/web # or cnpm install @airpower/web # or ... 声明表格使用的实体类我们要实现的是一个物料的表格，按后端接口文档，我们知道表格有这么几个列： 「name」: 物料名称 字符串「materialType」: 物料类型 枚举值「spc」: 规格型号 字符串「code」: 物料编码 字符串而枚举值，我们使用「AirPower-Enum」这个库来封装： import{ WebColor, WebEnum }from'@airpower/web' /** * # 物料类型枚举 */ exportclassMaterialTypeEnumextendsWebEnum { /** 自产品 */ staticreadonly PRODUCT =newMaterialTypeEnum(1,'自产品') // 设置图中的灯，后面装饰器会用到 .setColor(WebColor.SUCCESS) /** 外购品 */ staticreadonly PURCHASE =newMaterialTypeEnum(2,'外购品') .setColor(WebColor.WARNING) } 于是我们可以很轻易的声明出这个物料的实体类, ?请注意仔细看下面的一些注释： ?@Model({ // 标记这个东西叫做 物料。。。 label:'物料', }) exportclassMaterialEntityextendsBaseEntity { // 标记为表格列 @Table({ // 这个列是可以复制的 copy:true, // 这个列在列选择器中必须展示，无法取消 force:true, }) // 标记这个列可以搜索 @Search() @Field({ // 标记这个列的名字 label:'物料编码', }) code!:string @Table() @Search() @Field({ label:'物料名称', }) name!:string @Table({ // 标记这个列要显示一个枚举的颜色灯 color:true, // 列的宽度 width:100, }) @Search() @Field({ label:'物料类型', // 这个列要显示一个枚举字典 dictionary: MaterialTypeEnum, }) materialType!:number @Table({ copy:true, }) @Field({ label:'规格型号', }) spc!:string } 实现实体对应的服务有了这个实体的声明，那么我们可以使用这个物料的类来作为前后端对接数据的标准了。 ?当然，如果你的后端在你写完后要改，那可以继续标注一些装饰器来解决这些问题，可以参考 @airpower-transformer 这个库。 ?接下来，我们还要为这个实体类绑定一个服务： exportclassMaterialServiceextendsAbstractBaseServiceMaterialEntity { // 表示这个服务绑定的是 物料 这个实体类 entityClass = MaterialEntity // 表示这个服务请求后端的 /material/xxxx baseUrl ='material' } 好了，都准备好了，让我们开始写页面了 实现页面好，接下来可以写页面list.vue了： template APanel !-- 开始使用 ATable 这个我们提供的组件 -- ATable v-loading="isLoading"// 绑定一个Loading :data-list="response.list"// 绑定一个数据列表 :entity="MaterialEntity"// 绑定一个实体类 :service="MaterialService"// 绑定一个服务 @xxx="onXxx"// 如果你需要各种方法，可以继续加 / template#footerLeft APage :response="response" @changed="onPageChanged" / /template /APanel /template scriptlang="ts"setup // 从Hooks中拿出这些属性和方法 const{ isLoading, response, // 更多你需要的属性 onPageChanged, onXxx// 更多你需要的事件 } = useTable(MaterialService) /script 「这就搞定了。」 我们通过这种方式实现了： 列的定义列的自定义选择（实例图右上角的按钮）列的各种状态?如果你的表格需要各种事件的处理，比如 添加、修改、删除、详情、排序、分页、选择等等等各种方法，都可以为「ATable」绑定各种@xxx="onXxx"，基本上很多的事件都可以从useTable这个 Hook 中拿到。 ?更多的自定义你可能会说，我们家后端的标准和你不太一样，比如：接口名字的不同，数据结构的不同，状态码的不同等等，我们来一个个解决： 接口访问的名字不同你可以通过baseUrl属性来配置公共的部分，也可以通过重写urlForXXX属性来覆盖我们的默认的访问路径： exportclassMaterialServiceextendsAbstractBaseServiceMaterialEntity { entityClass = MaterialEntity baseUrl ='material' // 则你们的接口地址是 /material/paaaaaaaaage protectedurlGetPage:string='paaaaaaaaage' } 如果连baseUrl都需要自定义，你可以直接重写对应的方法： exportclassMaterialServiceextendsAbstractBaseServiceMaterialEntity { entityClass = MaterialEntity baseUrl ='material' getPage(request: QueryRequestMaterialEntity, apiUrl?:string):PromiseQueryResponsePageMaterialEntity { // 等于 /wuliao/getPage constresponsePage: QueryResponsePage =awaitthis.api("getPage","物料").post(request, QueryResponsePage) responsePage.list = responsePage.list.map(json=Transformer.parse(json,this.entityClass)) returnresponsePage } } 数据结构的不同和上面一样，你可以通过重写这部分不一样的方法来解决： exportclassMaterialServiceextendsAbstractBaseServiceMaterialEntity { entityClass = MaterialEntity baseUrl ='material' getPage(request: QueryRequestMaterialEntity, apiUrl?:string):PromiseQueryResponsePageMaterialEntity { // 等于 /wuliao/getPage constresponsePage: YourTypeClass =awaitthis.api(apiUrl).post(request, YourTypeClass) } // 如果请求的数据类型也不同，那就直接写个新方法？ // getMyPage..... } 状态码的不同AirPower-Web这个包的 Http 服务也是提供了大量灵活的方案来解决这些问题： 通过WebConfig你可以通过WebConfig来配置全局的 HTTP 服务状态码： //main.ts WebConfig.successCode =200000 // 更多的配置 通过重写 Service 调用你自己的方法你可以和上面重写getPage方法一样，重新调用一个自己的其他方法即可。 还有太多太多我们本意是不太建议大家各种重写来解决问题的，因为@airpower/web这个包本身是和AirPower4J这个后端标准后端服务来做兼容的全栈项目的，我们建议如果使用的话，可以考虑和AirPower4J这个项目的数据结构做一些兼容处理 ：） 还提供了些什么我们在「SPMS_Web」这个项目里，也使用了AirPower-Web这个包，具体可以参考这个开源项目。 当然，你也可以看看我们的设计图。 今天就这样啦，再见了各位。 附上设计图： AI编程资讯AI Coding专区指南： https://aicoding.juejin.cn/aicoding 点击"阅读原文"了解详情~ 阅读原文