Vue动态表单生成实践-优快云博客

基于vue的词法分析

主要是通过给定不同的json格式的数据，生成对应的模块

应用场景有时候会有后端给传json格式的数据，前端通过数据生成对应的模块

开发技术 vue + element-ui

如上图所示的json数据，type代表模块的类型。支持input ，radio ，option等等

label代表模块名字，rule代表校验的格式，值a，b，c代表名字，这个试例子中，你给我穿a,b,c我会给你返回key为a，b，c的json串，在dialog中点击确认会输出！

当粘贴如图所示的json，会生成

初始化的代码:

 initData () {
      for (let val in this.ObJson) {
        if (this.ObJson[val]['type'] === 'checkbox') {
          this.$set(this.ruleForm, val, [])
        } else {
          this.$set(this.ruleForm, val, '')
        }
        if (this.ObJson[val].myval) {
          this.$set(this.ruleForm, val, this.ObJson[val].myval)
        }
      }
    }
复制代码

模板的代码:

      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item :label="val.label" :prop=" ''+index" v-for="(val,index) in ObJson" :key="index" :rules="showrules(val.rule)">
          <el-col :span="11">
            <el-input v-if="val.type === 'input'" :type="val.inputtype||'input'" v-model="ruleForm[index]"></el-input>
            <el-radio-group v-if="val.type === 'radio'" v-model="ruleForm[index]">
              <el-radio v-for="(radioVal,radioIndex) in val.children" :key="radioIndex" :label="radioIndex">{{radioVal}}</el-radio>
            </el-radio-group>
            <el-select v-if="val.type === 'option'" v-model="ruleForm[index]" placeholder="请选择学历">
              <el-option :label="optionIndex" :value="optionVal" v-for="(optionVal,optionIndex) in val.children" :key="optionIndex"></el-option>
            </el-select>
            <el-date-picker v-if="val.type === 'datepicker'" type="date" placeholder="选择日期" v-model="ruleForm[index]"></el-date-picker>
            <el-checkbox-group v-if="val.type === 'checkbox'" v-model="ruleForm[index]">
              <el-checkbox :label="checkboxIndex" :value="checkboxIndex" name="type" v-for="(checkboxVal,checkboxIndex) in val.children" :key="checkboxIndex"></el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
复制代码

以及一些常用的校验和替换:

 validateId (rule, value, callback) {
      // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
      let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (reg.test(value) === false) {
        callback(new Error('身份证输入不合法'))
      } else {
        callback()
      }
    },
    validateMobile (rule, value, callback) {
      let myreg = /^[1][3,4,5,7,8][0-9]{9}$/
      if (!myreg.test(value)) {
        callback(new Error('手机号输入不合法'))
      } else {
        callback()
      }
    }
复制代码