Element Plus 的学习与使用

Administrator
Administrator
发布于 2025-06-04 / 60 阅读

Element Plus 是基于 Vue 3,面向设计师和开发者的组件库。

官网: https://element-plus.org/zh-CN/

中国大陆加速镜像站点: https://cn.element-plus.org/zh-CN/

FormCreate

基于Vue的低代码可视化表单设计器工具,通过数据驱动表单渲染

用户可以通过可视化界面快速高效地创建表单,提高开发者对表单的开发效率

官网: https://form-create.com/

FormCreate

FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。它支持 7 个 UI 框架,适配移动端,并且支持生成任何 Vue 组件。内置 20+ 种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。

官网: https://www.form-create.com/v3/

FcDesigner

FcDesigner 是一款基于Vue的开源低代码可视化表单设计器工具,通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单,提高开发者对表单的开发效率,节省开发者的时间。并广泛应用于在政务系统、OA系统、ERP系统、电商系统、流程管理等领域。

官网: https://view.form-create.com/

Element Plus 开源版已在本站部署: fc-designer

Q&A

表单中el-selectel-input的长度不一致?

当它们一起使用时,一般select长度是默认的,会比input短,只需要设置其宽度是100%即可。

.el-form-item .el-select {
    width: 100%;
  }

同理,el-date-picker也是类似的,但有所差别。

给其设置class,

<el-date-picker
     v-model="endTime"
     type="date"
     placeholder="结束时间"
     class="long-width"
     value-format="yyyy-MM-dd">
</el-date-picker>

然后设置其宽度是100%

.long-width {
    width: 100%;
  }