這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)vue中怎么實(shí)現(xiàn)一個(gè)自動(dòng)化表單，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)公司是一家從事企業(yè)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作、行業(yè)門戶網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)制作的專業(yè)網(wǎng)站建設(shè)公司，擁有經(jīng)驗(yàn)豐富的網(wǎng)站建設(shè)工程師和網(wǎng)頁設(shè)計(jì)人員，具備各種規(guī)模與類型網(wǎng)站建設(shè)的實(shí)力，在網(wǎng)站建設(shè)領(lǐng)域樹立了自己獨(dú)特的設(shè)計(jì)風(fēng)格。自公司成立以來曾獨(dú)立設(shè)計(jì)制作的站點(diǎn)千余家。

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

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

1. 減少html 重復(fù)片段

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

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

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

5. 表單布局可自定義

6. 可視化配置

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

使用

安裝

npm install charlie-autoform charlie-autoform_component_lib

源碼：https://charlielau.github.io/autoform/#/component/autoform

引入插件

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">立即創(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>

最終效果

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

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

cHello.vue

// PATH:/components/autoform/cHello.vue
<template>
 <div>
  <div>
   <p>基本的變量可以通過"mixins"獲取，這里有開發(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>

上述就是小編為大家分享的vue中怎么實(shí)現(xiàn)一個(gè)自動(dòng)化表單了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前文章：vue中怎么實(shí)現(xiàn)一個(gè)自動(dòng)化表單-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://jinyejixie.com/article44/djedee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、網(wǎng)頁設(shè)計(jì)公司、云服務(wù)器、網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)