elsa-vue 快速开发管理系统表单，列表模块，基于 element-ui

前言

 **elsa-vue（eleme simple admin）**一款基于element-ui封装 el-form，el-table 等组件，用于快速开发后台管理页面的组件库。

开发初衷

由于公司业务需求，需要大量重构新建多个后端管理系统。对于任何一个后管系统来说都充斥着大量的列表和表单页，虽然 2021 了，可以找到各种开源代码生成器，但放到现实中，会被各种因素影响的难以推行，甚至还不如自己重写。

那必然要解决这样的问题：如何让团队成员快速完成页面开发，拿出更多的时间对接后端接口。

elsa-vue就是在这样的环境下诞生的，由于项目组件库为element-ui，就将常用的 el-form 和 el-table 代码进行二次封装，尽可能的配置化，使我们能只关注 config.js 文件，而不需要在逻辑中投入更多时间。

下面是elsa-vue的思维导图：

不足和展望

说来惭愧** vue3 **正式版都发布了小半年到了 v3.0.5，**element-ui也摇身变成了element-plus，但我依旧还停留在 vue2 里。

对于elsa-vue也没有支持更多的element-ui组件，目前也只是停留在表单和列表。

但总要有希望，一方面在公司业务系统中继续提炼可在elsa-vue的组件；另一方面，会开始vue3的项目实践，以及开始elsa3-vue的设计开发。

下面开始示例常用的用法。

elsa-table

配置化的列表

首先比如这样的列表页，用element-table组件如何实现？

来看看使用** elsa-table** 组件的代码：

是不是很简单？虽然额外多了一个描述 columns 属性的文件，但这只是为了业务 vue 文件更简洁。

我们可以不用el-table-column子组件来进行列信息的描述。想象下，一个十几个字段的列表将会使得 template 多庞大？

代码示例对比：

这就是 elsa-vue 的核心特点：配置化。

支持分页配置

通常列表页都需要一个分页组件，你需要额外配置** el-pagination** 组件，这会使得你的代码变成这样：

就这个小 demo 而言，模板已经 14 行之多，想象下实际开发中会有多少代码量？

而我们的el-table依旧简洁：

对于分页属性只需要增加对于的 data.pagination 定义即可：

支持 el-table 配置

和以前用el-table完全一样，只是把** el-table-columns** 的配置挪到了单独的配置文件中，并以 **columns **进行描述。

这里列举常用的一些示例：

elsa-form**

配置化的表单

elsa-form和elsa-table一样，都采用维护独立的配置 js 文件用来代替原先el-form-item的描述模板，这里不过多展开对比。

比如要展示这样的页面：

最终我们的表单文件将是这样：

对应的 **fields **和 **model **如下：

你应该已经熟悉了这样的“套路”。值得一提的，我在elsa-form的内嵌模板中添加了表单操作按钮，他们将作为默认 slot 展示在表单底部。

自定义布局 layout

除了原先el-form**inline **的单行布局外，**elsa-form提供了layout **属性，内部使用el-row/col为布局提供更多自定义可能。

对于上图的布局，你只需要添加 layout 属性，并按照如下示例即可快速实现。

表单校验 validate 和重置 reset

原先** el-form** 的校验，和重置方法提供的入参不适合我们业务的实际需要：

比如：

validate 除了报错信息外，还需要当前表单 model 的数据对象

resetFields 能支持个别字段的重置，而非所有字段

这里做了二次封装，重新规划了参数：

业务需求

将围绕field配置文件展开，并给出对应配置示例。

禁用+显示/隐藏

未输入用户名，年龄无法填写（disabled）

年龄输入大于 18 岁时，显示身份证输入框

select 的延迟加载和数据控制

根据前后端，动态控制展示下拉框选项；并且下拉框数据为异步加载得到。

select tags 多选模式

级联查询（省市区）

时间控件

rules 校验规则

field 所支持特性

目前支持 input、select、checkbox、update 等常用 el 表单组件，部分并做了封装。未来会添加其他表单组件，及丰富目前组件功能。特性功能如下：

总结

目前elsa-vue已投入公司内部项目使用，满足日常需求，如果有各类问题可以 issue 给我，同时我会根据实际场景给出更多的使用范例，供刚接触 vue 的同学参考。

github 地址（内含 examples）：https://github.com/eminoda/elsa