VUE element-ui之el-form表单点击按钮自动增加表单（输入框），可新增删除_element中的表格如何根据按钮自增

需求：点击按钮新增指定表单，可动态删除，新增上限为10条

实现步骤：

定义模板：.
完整代码及样式

<div class="customer-dialog">
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :before-close="cancel"
    width="52.5%"
    :destroy-on-close="true"
    :close-on-click-modal="false"
  >
    <el-form
      ref="form"
      class="customer-form"
      :model="form"
      label-width="97px"
      :inline="true"
      :rules="rules"
      label-suffix=":"
    >
      <el-form-item label="客户名称" prop="customerName" class="form-style">
        <el-input v-model.trim="form.customerName" placeholder="请输入" maxlength="30" size="small" class="input-style" />
      </el-form-item>
      <el-form-item label="客户代码" prop="customerCode" class="form-style">
        <el-input v-model.trim="form.customerCode" placeholder="请输入" maxlength="30" size="small" class="input-style" />
      </el-form-item>
      <el-form-item label="账期" prop="payment" class="form-style">
        <el-input v-model.trim="form.payment" placeholder="请输入" maxlength="30" size="small" class="input-style" />
      </el-form-item>

      <el-form-item label="结算币种" prop="" class="form-style">
        <el-select v-model="form.currency" placeholder="请选择" size="small">
          <el-option
            v-for="item in currencyTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="所属地区" prop="" class="form-style">
        <el-select v-model="form.currency" placeholder="请选择" size="small">
          <el-option
            v-for="item in currencyTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="开户行" prop="" class="address form-style" style="width:100%">
        <el-input v-model.trim="form.phone" placeholder="请输入" maxlength="50" size="small" style="width:100%" />
      </el-form-item>

      <el-form-item label="账号" prop="" class="address form-style" style="width:100%">
        <el-input v-model.trim="form.phone" placeholder="请输入" maxlength="50" size="small" style="width:100%" />
      </el-form-item>

      <el-form-item label="税号" prop="" class="address form-style" style="width:100%">
        <el-input v-model.trim="form.phone" placeholder="请输入" maxlength="50" size="small" style="width:100%" />
      </el-form-item>

      <!-- 特殊表单 -->
      <div v-for="(item, index) in form.dynamicItem" :key="index" style="height: 51px">
        <el-form-item label="联系人" class="form-style">
          <el-input v-model="item.name" size="small" class="special-style" />
        </el-form-item>
        <el-form-item
          label="联系电话"
          class="form-style"
          :prop="'dynamicItem.' + index + '.phone'"
          :rules="[
            {required: false, message: '手机号不能为空', trigger: 'blur'},
            { pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
          ]"
        >
          <el-input v-model="item.phone" size="small" class="special-style" />
        </el-form-item>
        <el-form-item label="收货地址" class="form-style">
          <el-input v-model="item.address" size="small" class="special-style" />
        </el-form-item>
        <el-form-item>
          <el-button v-if="index+1 == form.dynamicItem.length" type="primary" size="mini" @click="addItem(form.dynamicItem.length)">+</el-button>
          <el-button v-if="index !== 0" type="danger" size="mini" @click="deleteItem(item, index)">-</el-button>
        </el-form-item>
      </div>
      <!-- *** -->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="cancel">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSave('form')">保 存</el-button>
    </div>
  </el-dialog>
</div>
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

data中定义：

data(){
	return{
		form: {
        dynamicItem: [
        //默认显示一条
          {
            name: '',
            phone: '',
            address: ''
          }
        ]
      }
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

methods中定义方法：

methods:{
	//新增方法
	addItem(length) {
      if (length >= 10) {
        this.$message({
          type: 'warning',
          message: '最多可新增10条!'
        })
      } else {
        this.form.dynamicItem.push({
          name: '',
          phone: '',
          address: ''
        })
      }
    },
    //删除方法
    deleteItem(item, index) {
      this.form.dynamicItem.splice(index, 1)
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

样式：

<style lang="scss">
  .customer-dialog{
    .customer-form{
      height: 320px;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .address{
        .el-form-item__content{
          width: 89%;
        }
        .el-input__inner{
          width: 100%;
        }
    }
    .form-style{
      margin-bottom: 10px;
      .input-style{
        width: 215px;
      }
      .special-style{
        width: 194px;
      }
    }
    /**滚动条的宽度*/
    ::-webkit-scrollbar {
      width: 8px;
    }
    //滚动条的滑块
    ::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 5px;
    }
  }
</style>
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
27
28
29
30
31
32
33
34
35

看效果：
默认状态：

点击新增：

动态删减，非常的完美。