element-plus form表单的二次封装


个人简介:

clone下来看源码

博主写了对element-plus的表格和表单的封装  大家支持一下

[表格]https://gitee.com/childe-jia/table-vue3

[表单] https://gitee.com/childe-jia/form-render

遗留问题 :待解决

select 为 multiple 多选时 必须初始化空数组(在 elementplus v-model 初始化 updateValue 时 为空数组会触发校验)

Introduction

WHAT

form-renderer 基于元素 element-plus,但不限于元素 element-plus 组件。在完全继承 element-plus 元素的 form 属性的基础上,进行了扩展。一些非表单组件或自定义组件,因此,用户可以使用一段 json 来呈现完整的表单。

WHY

在我们的日常开发中,有很多有表单的页面,通常表单结构相似,逻辑重复。el 表单呈现器没有复杂的逻辑。它只转换 JSON 来呈现表单项,节省了编写业务逻辑的时间和精力,并减少了重复代码。

Features

用 json 呈现表单

支持与自定义组件集成

支持 updateForm 方法批量更新表单数据

支持 setOptions 方法,动态更改选择选项

内容支持 inputFormat、outputFormat、trim 以处理组件的输入和输出值

支持 v-model

Links

$attrs 和 $listeners (vue2&&vue3)

vue2 与 vue3 函数式组件

vue 2 与 vue3 获取模版引用 (ref)的区别

vue2 与 vue3 v-model 的区别

vue2 版本

中文文档

element-plus table 的封装

Quick Start

pnpm i el-form-renderer-vue3

import elFormRenderer from "el-form-renderer-vue3";

app.use(elFormRenderer);

Methods

support all el-form's methods

Slots

Inspiration

thanks to el-form-renderer

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容