首页 / VUE / 使用vue自动化表单(附代码)
使用vue自动化表单(附代码)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了使用vue自动化表单(附代码),小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2388字,纯文字阅读大概需要4分钟。
内容图文
![使用vue自动化表单(附代码)](/upload/InfoBanner/zyjiaocheng/289/3c0d4a9db6034353976becb76dfa963c.jpg)
背景
B端系统表单较多,且表单可能含有较多字段
字段较多的表单带来了大片HTML代码
在大片HTML中,混杂着参数绑定、事件处理等逻辑,不利于维护
技术栈 Vue,Element(默认表单布局)适合中后台项目快速开发
目标
通过json配置快速生成表单的vue plugin。
设计目标
减少html 重复片段
表单字段组件可扩展
事件、联动通过eventbus 解耦
校验可扩展
表单布局可自定义
可视化配置
大概方案设计
使用
安装
npm install charlie-autoform charlie-autoform_component_lib
引入插件
import AutoForm from 'charlie-autoform'; import AutoForm_component_lib from 'charlie-autoform_component_lib'; Vue.use(AutoForm); Vue.use(AutoForm_component_lib);
基本使用
demo.vue
<template> <p> <auto-form ref="tagForm1" :model="model1" :fields="fields1" :layout="layout"> <el-form-item class="clearfix"> <el-button type="primary">立即创建</el-button> <el-button>取消</el-button> </el-form-item> </auto-form> </p> </template> <script> export default { data() { return { model2: { name: '', type: [] }, layout2: { align: 'left', labelWidth: '100px', custom: false, //是否自定义布局 inline: true //是否内联 }, fields2: [ { key: 'name', type: 'input', templateOptions: { label: '审批人' } }, { key: 'region', type: 'select', templateOptions: { label: '活动区域', placeholder: '请选择活动区域', options: [ { label: '区域一', value: 'shanghai' }, { label: '区域二', value: 'beijing' } ], validators:[ //校验 // {required:true,message:'必填'} // "" ] } } ] }; } }; </script>
最终效果
添加自定义组件或者组件目录
Vue.$autoform.RegisterDir(()=>require.context('./components/autoform', 'c'));//目录 Vue.$autoform.Register(Vue,[Components...],{prefix: "c"}) //组件对象
cHello.vue
// PATH:/components/autoform/cHello.vue <template> <p> <p> <p>基本的变量可以通过"mixins"获取,这里有开发组件需要的一些变量</p> <p>自定义子组件:Hello</p> <p>当前field: {{field}}</p> <p>整个model: {{model}}</p> <p>当前model: {{model[field.name]}}</p> <p>layout: {{layout}}</p> <p>字段相关配置to: {{to}}</p> </p> </p> </template> <script> import {baseField} from "charlie-autoform"; export default { mixins: [baseField], name: 'cHello', data () { return {}; }, methods: {}, mounted(){ //this.eventBus 事件总线 } }; </script>
成果
目前应用再多个系统
定性: 维护成本降低、关注点分离
定量:表单开发效率提升50%
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
怎样使用vue实现个人信息查看与密码修改
HTML文档内嵌入JS方法汇总
以上就是使用vue自动化表单(附代码)的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的使用vue自动化表单(附代码)全部内容,希望文章能够帮你解决使用vue自动化表单(附代码)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。