新增表单，并且键值上传

很久的代码了，看看应该能有帮助

<template>
  <div class="one">
    <el-card>
      <el-form ref="demoForm" :model="infoa" :rules="rules">
        <el-form-item label="收益商品规则">
          <div v-for="(d, index) in upinof" :key="index">
            <el-input
              @input="aaaa(d.start_money)"
              style="    width: 150px;"
              v-model="d.start_money"
              placeholder="请输入起始金额"
              clearable
            />
            <span style="padding: 10px;">-</span>
            <el-input
              @input="aaaas(d.end_money)"
              style="    width: 150px;"
              v-model="d.end_money"
              placeholder="请输入结束金额"
              clearable
            />
            <span style="padding: 10px;">-</span>

            <el-input
              @input="aaaaaa(d.num)"
              style="    width: 150px;"
              v-model="d.num"
              placeholder="请输入商品数量"
              clearable
            />
            <el-button type="primary" style="margin:10px" @click="sc(d, index)"
              >删除</el-button
            >
          </div>
        </el-form-item>
        <el-button type="info" @click="addasdasdasdas"
          >新增</el-button
        >
        <!-- 提交 -->
        <el-form-item>
          <el-button type="primary" @click="submit">
            提交
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
export default {
  component: {
    upimage2: function() {
      return this.isUpdate ? [{ url: this.data.img_url }] : [];
    }
  },
  watch: {
    aaaaaaaa: {
      handler(a, b) {
        console.log(a);
        this.aaaaaaaa = a;
      }
    },
    aasdasdasda: {
      handler(a, b) {
        console.log(a);
        this.aasdasdasda = a;
      }
    },
    asdasdajdklklwa: {
      handler(a, b) {
        console.log(a);
        this.asdasdajdklklwa = a;
      }
    }
  },
  data() {
    return {
      info: -1,
      infoa: {
        rule: []
      },
      upinof: [],
      quertlistall: {},
      // 表单数据
      form: Object.assign({}, this.data),
      // 表单验证规则
      rules: {
        qr_img: [{ required: true, message: "请上传图片", trigger: "change" }]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      adasdad: [],
      aaaaaaaa: "",
      aasdasdasda: "",
      asdasdajdklklwa: ""
    };
  },
  comments: {
    aaaawwdww() {}
  },
  methods: {
    // 删除
    sc(d, indexs) {
      this.upinof = this.upinof.filter((item, indexs) => {
        return this.upinof[indexs] != d;
      });
      console.log(this.upinof);
    },
    aaaa(e) {
      this.aaaaaaaa = e;
    },
    aaaas(e) {
      this.aasdasdasda = e;
    },
    aaaaaa(e) {
      this.asdasdajdklklwa = e;
    },
    // 数组新增
    addasdasdasdas() {
      this.upinof.push({
        start_money: "",
        end_money: "",
        num: ""
      });
      //set 不经过data 更新
      this.$set(this.upinof, this.info, {
        start_money: "",
        end_money: "",
        num: ""
      });
      if (this.info != -1) {
        ++this.info;
        this.infoa[`rule[${this.info}][start_money]`] = this.aaaaaaaa;
        this.infoa[`rule[${this.info}][end_money]`] = this.aasdasdasda;
        this.infoa[`rule[${this.info}][num]`] = this.asdasdajdklklwa;
        console.log(this.infoa);
      }
    },
    /* 提交this.upinof.length */
    submit() {
      if (this.info == -1) {
        console.log(1111);
        this.upinof.forEach((element, index) => {
          this.infoa[`rule[${index}][start_money]`] = element.start_money;
          this.infoa[`rule[${index}][end_money]`] = element.end_money;
          this.infoa[`rule[${index}][num]`] = element.num;
        });
        // return;
      }
      let formData = new FormData();
      for (let key in this.infoa) {
        if (this.infoa[key] !== null && this.infoa[key] !== undefined) {
          formData.append(key, this.infoa[key]);
        }
      }
      this.$http.post("admin-api/goods-config/update", formData).then(res => {
        this.loading = false;
        this.info = -1;
        if (res.data.status == 1) {
          this.$message({ type: "success", message: "成功" });
        } else {
          this.$message.error(res.data.error);
        }
      });
    },
    /* 关闭当前页面 */
    closeThis() {
      this.$store
        .dispatch("user/tabRemove", this.$route.fullPath)
        .then(({ lastPath }) => {
          this.$router.push(lastPath || "/");
        });
    },

    // 查询信息
    queryinfo() {
      this.$http.get("admin-api/goods-config/get", {}).then(res => {
        if (res.data.status === 1) {
          console.log(res);
          if (res.data.result[0]) {
            this.infoa = res.data.result[0];
            this.upinof = JSON.parse(res.data.result[0].rule);
          }
        }
      });
    }
  },
  created() {
    this.queryinfo();
  }
};
</script>