背景

B端系統(tǒng)表單較多，且表單可能含有較多字段

字段較多的表單帶來(lái)了大片HTML代碼

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

技術(shù)棧 Vue，Element(默認(rèn)表單布局)適合中后臺(tái)項(xiàng)目快速開(kāi)發(fā)

目標(biāo)

通過(guò)json配置快速生成表單的vue plugin。

設(shè)計(jì)目標(biāo)

減少html 重復(fù)片段

表單字段組件可擴(kuò)展

事件、聯(lián)動(dòng)通過(guò)eventbus 解耦

校驗(yàn)可擴(kuò)展

表單布局可自定義

可視化配置

大概方案設(shè)計(jì)

使用

安裝

npm install charlie-autoform charlie-autoform_component_lib 復(fù)制代碼

使用文檔: doc

！！！請(qǐng)忽略文檔上方的開(kāi)發(fā)指南

引入插件

import AutoForm from 'charlie-autoform'; import AutoForm_component_lib from 'charlie-autoform_component_lib';Vue.use(AutoForm); Vue.use(AutoForm_component_lib); 復(fù)制代碼

基本使用

demo.vue

<template><div><auto-form ref="tagForm1" :model="model1" :fields="fields1" :layout="layout"><el-form-item class="clearfix"><el-button type="primary">立即創(chuàng)建</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 //是否內(nèi)聯(lián)},fields2: [{key: 'name',type: 'input',templateOptions: {label: '審批人'}},{key: 'region',type: 'select',templateOptions: {label: '活動(dòng)區(qū)域',placeholder: '請(qǐng)選擇活動(dòng)區(qū)域',options: [{label: '區(qū)域一',value: 'shanghai'},{label: '區(qū)域二',value: 'beijing'}],validators:[ //校驗(yàn)// {required:true,message:'必填'}// ""]}}]};}}; </script>復(fù)制代碼

最終效果

添加自定義組件或者組件目錄

Vue.$autoform.RegisterDir(()=>require.context('./components/autoform', 'c'));//目錄 Vue.$autoform.Register(Vue,[Components...],{prefix: "c"}) //組件對(duì)象 復(fù)制代碼

cHello.vue

// PATH:/components/autoform/cHello.vue <template><div><div><p>基本的變量可以通過(guò)"mixins"獲取，這里有開(kāi)發(fā)組件需要的一些變量</p><p>自定義子組件：Hello</p><p>當(dāng)前field: {{field}}</p><p>整個(gè)model: {{model}}</p><p>當(dāng)前model: {{model[field.name]}}</p><p>layout: {{layout}}</p><p>字段相關(guān)配置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> 復(fù)制代碼

成果

目前應(yīng)用再多個(gè)系統(tǒng)

定性： 維護(hù)成本降低、關(guān)注點(diǎn)分離

定量：表單開(kāi)發(fā)效率提升50%

反饋

歡迎大家來(lái)敲： github

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。