总结一下我个人使用form-create后遇到问题的解决办法_form-create.min.js:7 [form-create err]: 解析失败:funct

应公司需求，做了一个自定义表单，拖动控件，拼凑出自己想要的表格，比如“请假申请表”、“转正申请表”、费用申请表等等。自定义表单做好后，那么问题来了，如何动态展示已经拼凑好的各个元素呢？

上网找到了 form-create ,这时候的百度，好像现在也只能找到这个自定义表单生成器，估计用起来比较简单吧，个人用起来也觉得刚好够用，只是有些地方教程写得不全面，坑还是有的。下面总结一下我个人使用后遇到问题的解决办法：

先上一张成品图：

从这张图可以看到，和官方案例的差别在：
1.提交按钮在右上角（官方在表单的底部）、
2.包含有双列，三列表单
3.附件上传有预览按钮（官方上传附件只有删除按钮）

1.提交按钮在右上角（官方在表单的底部）

<el-button  @click="mySubmit ()">提交</el-button>

 mySubmit () {
      this.fApi.validate((valid) => {
        if (valid) {
             this.fApi.submit((formData) => {   // 通过submit()方法获取到formData
             })
          }
      }
      )
 },
1
2
3
4
5
6
7
8
9
10
11

2.包含有双列，三列表单

 this.rule.push({
      type: 'el-row',
               children: [
                   {
                       type: 'el-col',
                       props: {
                           span: 24
                       },
                       children: [children1,children2,children3]
                   },
               ]
           })
1
2
3
4
5
6
7
8
9
10
11
12

3.附件上传有预览按钮（官方上传附件只有删除按钮）

props:{
        handleIcon: true,
        onHandle: (file) => {
           let upperUrl = file.url.toUpperCase()
           if (upperUrl.indexOf(".PNG") != -1 || upperUrl.indexOf(".JPG") != -1 || upperUrl.indexOf(".JPEG") != -1 || upperUrl.indexOf(".BMP") != -1) {
               _this.$alert('<img style="max-width: 390px" src="' + file.url + '" />', '图片预览', {
                   dangerouslyUseHTMLString: true
               });
           } else {
               window.open(file.url)
           }
       },
}
1
2
3
4
5
6
7
8
9
10
11
12
13

分享完毕~~