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

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>