SOURCE

var handleFormRule = xinyaForm.handleFormRule;


const formJSON = {
    "id": 1,
    "title": "城市管理",
    "table_name": "branch",
    "icon": "",
    "fields": [
        {
            "form_id": 1,
            "title": "城市名称",
            "field_name": "name",
            "field_type": "text",
            "props": {
                "placeholder": "城市名称",
                "default_value": "dddd"
              
            },
            "validate": [{
                "min": 20,
                "type": "string",
                "required": true
            }],
            "is_display": 1,
            "is_search": 1,
            "order": 1,
            "options": []
        },
        {
            "form_id": 1,
            "title": "公司名称",
            "field_name": "appname",
            "field_type": "text",
            "props": {
                "placeholder": "公司名称"
            },
            "validate": {
                "max": 20,
                "type": "string",
                "required": true
            },
            "is_display": 1,
            "is_search": 1,
            "order": 2,
            "options": []
        },
        {
            "form_id": 1,
            "title": "闪送验证取件密码模板id",
            "field_name": "piece_of_password",
            "field_type": "text",
            "props": {
                "placeholder": "闪送验证取件密码模板id,6位"
            },
            "validate": {
                "length": 6,
                "type": "number",
                "required": true
            },
            "is_display": 1,
            "is_search": 1,
            "order": 3,
            "options": []
        },
        {
            "form_id": 1,
            "title": "拼音缩写",
            "field_name": "abbreviation",
            "field_type": "text",
            "props": {
                "placeholder": "城市名首字母的大写组合，比如天津为TJ"
            },
            "validate": {
                "type": "string",
                "required": true,
                "pattern": "/^[A-Z]+$/"
            },
            "is_display": 1,
            "is_search": 1,
            "order": 4,
            "options": []
        }
    ]
}

vm = new Vue({
  el: '#app',
  data: {
    formData: {},
    rule: handleFormRule(formJSON),
    option: {
      //显示表单重置按钮
      resetBtn: true,
      //表单提交事件
      onSubmit: function(formData) {
        alert(JSON.stringify(formData));
        //按钮进入提交状态
        $f.btn.loading();
        //重置按钮禁用
        $f.resetBtn.disabled();
        //按钮进入可点击状态
        //                    $f.btn.finish();
     
      }
    }
  },
  watch: {
    'formData.address': {
      handler: function(n) {
        console.log(n);
      },
      deep: true
    }
  },
  methods: {
    change: function(...arg) {
      console.log(arg);
    }
  },
  mounted: function() {
    $f = this.$refs.fc.$f;
    this.formData = $f.model();

    //动态添加表单元素
    //$f.append($r, 'pic');
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/iview/dist/iview.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/xinya-form/dist/xinya-form.min.js">
</script>

<div id="app">
  <xinya-form ref="fc" :rule="rule" :option="option" @goods-name-change="change"
  />
</div>

@import url("//cdn.jsdelivr.net/npm/iview/dist/styles/iview.css");