背景

B端系統表單較多，且表單可能含有較多字段

字段較多的表單帶來了大片HTML代碼

在大片HTML中，混雜著參數綁定、事件處理等邏輯，不利于維護

技術棧 Vue，Element(默認表單布局)適合中后臺項目快速開發

目標

通過json配置快速生成表單的vue plugin。

設計目標

減少html 重復片段

表單字段組件可擴展

事件、聯動通過eventbus 解耦

校驗可擴展

表單布局可自定義

可視化配置

大概方案設計

使用

安裝

npm install charlie-autoform charlie-autoform_component_lib 復制代碼

使用文檔: doc

！！！請忽略文檔上方的開發指南

引入插件

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><div><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></div> </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><div><div><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></div></div> </template><script>import {baseField} from "charlie-autoform";export default {mixins: [baseField],name: 'cHello',data () {return {};},methods: {},mounted(){//this.eventBus 事件總線}}; </script> 復制代碼

成果

目前應用再多個系統

定性： 維護成本降低、關注點分離

定量：表單開發效率提升50%

反饋

歡迎大家來敲： github

總結

以上是生活随笔為你收集整理的基于vue自动化表单实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。