Element-UI可以动态生成的form表单_elementui动态生成表单

Element-UI可以动态生成的form表单

此form表单每一项绑定的值组成一个对象，对象叠加组成了一个对象数组，循环对象数组生成form的表单项。当点击新增一项时，其实就是给form表单对象数组添加一个对象，删除则反之。值得注意的是，由于动态表单得到的是一个对象数组，但我们需要的是表单的值组成的对象，所以我们还需要把这个对象数组转成一个对象

<template>
  <div class="wrap">
    <!-- 动态生成form表单 -->
    <div class="form_wrap">
      <el-form :model="form" ref="formData" :rules="rules">
        <el-row>
          <div
            class="finance_wrap_box_list"
            v-for="(item, index) in form.otherFeesList"
            :key="index"
          >
            <el-row>
              <el-col
                :span="24"
                style="
                  height: 40px;
                  display: flex;
                  justify-content: space-between;
                "
              >
                <el-form-item
                  :label="'费用' + index"
                  :prop="'otherFeesList.' + index + '.feePrice'"
                  :rules="rules.moreNotifyOjbectName"
                  style="height: 50px; width: 100%"
                  label-width="100px"
                >
                  <el-input
                    v-model="item.feePrice"
                    @blur="inputFunc($event)"
                    size="small"
                    style="width: 60%"
                    clearable
                    placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
                <div
                  class="remove_btn"
                  @click="removeList(index)"
                  style="line-height: 45px; cursor: pointer"
                >
                  <i class="el-icon-circle-close"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" style="height: 40px; margin-bottom: 20px">
                <el-form-item
                  label-width="100px"
                  :prop="'otherFeesList.' + index + '.feeDesc'"
                  :rules="rules.moreNotifyOjbectText"
                >
                  <el-input
                    size="small"
                    v-model="item.feeDesc"
                    clearable
                    maxlength="100"
                    minlength="4"
                    @change="inputFuncFeeDesc($event)"
                    style="width: 95%"
                    placeholder="请输入费用说明 例：差旅费，因老师在异地故提供额外交通费"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-row>
            <el-col :span="24">
              <div class="add_list" @click="addList()">
                <i class="el-icon-plus" style="font-weight: bold"></i> 添加
              </div>
            </el-col>
          </el-row>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        otherFeesList: [
          {
            id: "",
            feeDesc: "", //费用说明
            feePrice: "", //费用金额
          },
        ],
      },
      rules: {
        moreNotifyOjbectName: [
          {
            required: true,
            trigger: "blur",
            message: "金额不能为空",
          },
          {
            pattern:
              /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: "请输入正确格式，可保留两位小数",
          },
        ],
      },
    };
  },

  methods: {
    addList() {
      this.form.otherFeesList.push({
        id: "",
        feeDesc: "", //费用说明
        feePrice: "", //费用金额
      });
    },
    removeList(index) {
      this.form.otherFeesList.splice(index, 1);
    },
  },
};
</script>

<style>
.form_wrap {
  width: 500px;
  margin: 20px auto;
}
.add_list {
  width: 80%;
  border: 1px solid;
  text-align: center;
  font-size: 14px;
  margin: 0 auto;
  cursor: pointer;
  height: 30px;
  line-height: 30px;
}
</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
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142