【el-form】表单点击按钮自动增加表单及保存_eclipse可以自动添加表单吗

需求不难，页面上有一个表单，然后有个新增按钮，每次点击新增，都会增一个新的表单
不是在表单内增行，是直接增一个整体的表单，因为涉及到校验，在保存的时候要处理下

一、涉及到多个表单，所以肯定要以数组的形式存放，后端接收也是数组
先在data中定义数组，说个细节点，这个orders代表索引，原先是我自己定义的，但是保存后发现，如果后端不返的话，我拿不到索引，就不知道我改的是第几个表单，所以这个一定要让后端给一下。先定义一个对象，这样页面上默认有一个表单

      hblInfoList: [
        {
          orders: 0,
          billCode: '',
          remark: '',
          qty: '',
       
        },
      ],
1
2
3
4
5
6
7
8
9

二，新增事件，注意点：刚开始新增的时候数组只有一条，如果长度为1，这个时候新增的索引就是1，因为第一条的索引是0。如果长度大于1，假设数组长度为2，这个时候新增的索引就是数组的长度，即索引为2，前面两条的索引分别是0和1，很简单的逻辑，想清楚就没啥绕的。这样写也是考虑保存后走详情接口的时候如果新增，还是这逻辑，原先我写的是sum++，那样不够灵活

    addhblForm() {
      var sum
      if (this.hblInfoList.length > 1) {
        sum = this.hblInfoList.length
      } else {
        sum = 1
      }
      this.hblInfoList.push({
        orders: sum,
       billCode: '',
          remark: '',
          qty: '',
      })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

三、删除，直接拿到索引，用splice方法删掉就行

   delHBLBtn(index) {
      this.hblInfoList.splice(index, 1)
    },
1
2
3

四、保存
因为页面上表单比较多，所以用的是 Promise.all，挺好用的，单个form也能用

save(){
      var promiseAll = []
      this.hblInfoList.forEach((item, index) => {
        var hblInfoRef = 'hblInfoForm' + index
        const hblInfoForm = new Promise((resolve, reject) => {
          if (!this.$refs[hblInfoRef][0]) resolve()
          this.$refs[hblInfoRef][0].$refs['form'].validate(valid => {
            if (valid) {
              resolve()
            } else {           
              reject(this.$t('messageText.basicWarning'))
            }
          })
        })
        promiseAll.push(hblInfoForm)
      })
   Promise.all([xxxForm, xxxForm, xxxForm, ...promiseAll])       
        .then(() => {
//写新增修改业务逻辑
})
.catch(err => {
          this.$message.warning(err)
        })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24