vue自动化表单实例分析

发布时间：2020-12-17 02:18:06 所属栏目：百科来源：网络整理

导读：背景 B端系统表单较多，且表单可能含有较多字段字段较多的表单带来了大片HTML代码在大片HTML中，混杂着参数绑定、事件处理等逻辑，不利于维护技术栈 Vue，Element(默认表单布局)适合中后台项目快速开发目标通过json配置快速生成表单的vue plugin。设计目

B端系统表单较多，且表单可能含有较多字段字段较多的表单带来了大片HTML代码在大片HTML中，混杂着参数绑定、事件处理等逻辑，不利于维护技术栈 Vue，Element(默认表单布局)适合中后台项目快速开发

通过json配置快速生成表单的vue plugin。

设计目标

大概方案设计

使用

安装

源码：

引入插件

Vue.use(AutoForm);
Vue.use(AutoForm_component_lib);

基本使用

取消

最终效果

添加自定义组件或者组件目录

require.context('./components/autoform','c'));//目录 Vue.$autoform.Register(Vue,[Components...],{prefix: "c"}) //组件对象

基本的变量可以通过"mixins"获取，这里有开发组件需要的一些变量

自定义子组件：Hello

当前field: {{field}}

整个model: {{model}}

当前model: {{model[field.name]}}

layout: {{layout}}

字段相关配置to: {{to}}

目前应用再多个系统

定性：维护成本降低、关注点分离定量：表单开发效率提升50%

源码：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!