组件里能否添加空白占位组件，和分隔线组件？

[bowencool]

组件里能否添加空白占位组件，和分隔线组件？

[bowencool]

就是组件分组的意思吧。拆分成多个表单感觉容易一点，<form class="dynamic-form"></form>的样式就很好控制了，提交的时候合并一下数据就达到目的了吧

[china-fengguan]

的确是这样，果然是好点子。
另外Number组件，想要输入个小数很难，.00补得太快了，应该是响应blur事件吧？

[bowencool]

在这里修改

super-form/src/components/dynamic-form/input-number.vue

Line 41 in 1d9f598

this.timer = setTimeout(() => { this.updateValue(value) }, 500)

[china-fengguan]

这个动态form应该怎么用呢，如果不用store.state.qry作为中间变量？form-config的json文件如果直接赋值的话，一直报错。。。有个例子就好了。

[bowencool]

最初考虑到同时编辑多个表单，所以才加了fid这个参数，现在已经移除了

[china-fengguan]

对于这个super-form, 我的第一感觉用法就是只要按照规定格式给定json文件，然后将这个json文件赋予form-config, 在前端应该显示该form, 不知道这个想法是否正确？现在我按照这个做法来做，无论是在beforeCreated, 还是mounted函数中对form-config赋值json, dynamic-form似乎都拿不到，一直报undefined错误。

[china-fengguan]

类似于这样的做法:
dynamic-form(:form-config="userFormConfig" v-model="userForm" ref="userForm")
然后将json string 赋值给userFormConfig

[bowencool]

你传的string类型吗

[china-fengguan]

json对象，同样的json对象如果赋给$store.state.forms.qry页面就可以显示，但是用userFormConfig就不可以。

[china-fengguan]

以下是我从本地文件导入json实现页面加载的代码：

loadJsonFromFileConfirmed (file, fileList) {
  let reader = new FileReader()
  reader.onload = async (e) => {
    try {
      let document = JSON.parse(e.target.result)
      this.$store.commit('FORM_IMPORT_WITH_FID_G', {fid: this.$route.params.fid, initV: document})
    } catch (err) {
      console.log(`load JSON document from file error: ${err.message}`)
      this.showSnackbar(`Load JSON document from file error: ${err.message}`, 4000)
    }
  }
  reader.readAsText(file.raw)
}

[bowencool]

你是不是store里写的有undefined？

state: {
  qry: undefined
}

还有你为什么要用敏感词当变量名。。。document

[china-fengguan]

这个是没有问题的，页面可以正常加载，我只是说明以下json对象的来源和赋值情况，因为这里仍然是赋值给$store.state.forms.qry。

[china-fengguan]

对于一个组件来说，应用组件不应该依赖store, 否则看起来不完美。。。使用也有局限性

[bowencool]

不可能吧，我之前用aJax的异步数据都可以渲染的，你肯定传错了，组件也没有任何依赖store的代码。
这是此项目的前身，没有使用store和router

[china-fengguan]

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'forEach' of undefined"
TypeError: Cannot read property 'forEach' of undefined
at VueComponent.setDefaultValue (form.vue?ee25:41)
以上是报错信息

[bowencool]

报错这么明显了，相信你会找到原因的。

[china-fengguan]

谢谢，根据提供的项目前身代码分析，对form-config初始化是有必要的，正如：
dynamicForm2: { size: 'small', formList: [] },因为created方法是发生在dynamic-form生成之后。
所以做了以下修正，问题解决。
userFormConfig: this.$store.state.forms.qry,以此来初始化
created方法里只要改变$store.state.forms.qry就可以了。

[bowencool]

这个边缘情况是我考虑不周，也给我提了个醒。大家都有收获是最重要的😄