element-ui 动态增减表单项_element点击增加多个表单

动态添加多个 表单项 如下图：

html:

  <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" label-position="right" label-width='100px'> 
          <el-row>
            <el-col :span="6">
              <el-form-item v-for="(item,index) in this.lis1" :label="'预留位号:' +index" :key="index">
                <el-input v-model="item.presettingNo" placeholder="预留位置" onkeyup="this.value=this.value.replace(/[^\d.]/g,'')">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item v-for="(item,index) in this.lis2" :label="'拍照时:' + index" :key="item.key" label-width='80px'>
                <el-input v-model="item.hour" placeholder="拍照时" onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item v-for="(item,index) in this.lis3" :label="'拍照分:' +index" :key="index" label-width='70px'>
                <el-input v-model="item.minute" placeholder="拍照分" onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"></el-input>
                <el-button type="primary" icon="el-icon-minus" size="mini" @click.prevent="removeDomain(item)" style="margin-left:15px"></el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-button type="primary" icon="el-icon-plus" size="mini" style="margin-left:2.5%;" @click="addDomain"></el-button>
   </el-form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

数据初始化：

 lis1: [
        {
          presettingNo: 255,
        },
      ],
      lis2: [
        {
          hour: 0,
        },
      ],
      lis3: [
        {
          minute: 0,
        },
      ],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

js 部分：

//删除
 removeDomain(item) {
      var index = this.lis3.indexOf(item)
      if (index !== -1) {
        this.lis1.splice(index, 1)
        this.lis2.splice(index, 1)
        this.lis3.splice(index, 1)
        this.$forceUpdate()
      }
    },
   // 添加按钮
      addDomain() {
      this.lis1.push({
        presettingNo: 255,
        key: Date.now(),
      })
      this.lis2.push({
        hour: 0,
        key: Date.now(),
      })
      this.lis3.push({
        minute: 0,
        key: Date.now(),
      })
      this.$forceUpdate()
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

解决输入框数据更新视图无反应问题

  this.$forceUpdate()
1