vue动态添加form表单行数

思路：就是动态修改数组就行

<template>
  <el-dialog :title="title" :visible.sync="visible" @opened="openInit" class="meet-template" :modal-append-to-body="false" width="880px" style="text-align: center;">
    <el-form id="twr-suggest-meet" ref="form" :model="form" :disabled="disabled">
      <el-row>
        <!-- <el-col :span="3">
          <el-form-item>
            带班主任
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item prop="headTeacher">
            <el-input v-model="form.headTeacher" maxlength="10"></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="4">
          <el-form-item>
            记录人
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="a_1">
            <el-input v-model="form.a_1" maxlength="10"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            时间
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="createTime">
            <el-date-picker v-model="form.createTime" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item>运行中存在的问题</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>解决措施及建议</el-form-item>
        </el-col>
      </el-row>

      <el-row class="textarea-row" v-for="index in totalNum" :key="index">
        <el-col :span="12">
          <el-form-item :prop="'p_' + index">
            <div v-if="isPdf" class="pdf-textarea-div">{{form['p_' + index]}}</div>
            <el-input type="textarea" resize="none" v-model="form['p_' + index]" maxlength="70" v-if="!isPdf"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :prop="'s_' + index">
            <div v-if="isPdf" class="pdf-textarea-div">{{form['s_' + index]}}</div>
            <el-input type="textarea" resize="none" v-model="form['s_' + index]" maxlength="70" v-if="!isPdf"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-button type="primary" @click="onAddSuggest" class="add-suggest-btn">+</el-button>
    <div slot="footer" class="dialog-footer">
      <el-button class="mBtn" type="primary" size="small" @click="onOK" v-if="this.flag !== 'look'">确 定</el-button>
      <!-- <el-button class="mBtn" @click="onResetForm" v-if="this.flag !== 'look'"
          >重 置</el-button
        > -->
      <el-button class="mBtn" type="primary" size="small" @click="onSaveTemplate" v-if="this.flag == 'look'">保存模板</el-button>
      <el-button size="small" type="primary" class="mBtn" @click="toPdf()">导出</el-button>
      <el-button size="small" class="mBtn" @click="onCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import htmlToPdf from '@/utils/htmlToPdf.js';
import { getTeamMeetingById } from "@/api/teamMeeting.js";
export default {
  data() {
    return {
      title: "新增班后讲评总结及解决措施建议表",
      disabled: false,
      form: {
        // headTeacher: "",
        a_1: "",
        createTime: new Date(),
        p_1: "",
        s_1: "",
        p_2: "",
        s_2: "",
        p_3: "",
        s_3: "",
        p_4: "",
        s_4: "",
        p_5: "",
        s_5: "",
      },

      totalNum: [1, 2, 3, 4, 5],
      isPdf: false, //是否在打印中，true：将div替换textarea，false，隐藏div，显示textarea
    };
  },
  props: {
    meetVisible: {
      require: true,
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: null,
    },
    flag: {
      type: String,
      default: "add",
    },
  },
  computed: {
    visible: {
      get() {
        return this.meetVisible;
      },
      set(val) {
        this.$emit("update:meetVisible", val);
      },
    },
  },
  methods: {
    //打开窗口初始化
    openInit() {
      var that = this;
      //重置表单
      this.onResetForm();
      if (this.id) {
        if (this.flag == "look") {
          this.title = "查看班后讲评总结及解决措施建议表";
          //表单设为不可编辑
          this.disabled = true;
        } else {
          this.title = "编辑班后讲评总结及解决措施建议表";
          this.disabled = false;
        }
      }

      if (this.id) {
        getTeamMeetingById({ id: this.id }).then((res) => {
          var data = res.data.data;
          if (data.suggestForm != null && data.suggestForm != "") {
            var content = JSON.parse(data.suggestForm);
            var sum = Object.keys(content).length - 4;
            if (sum / 2 > 5) {
              for (var i = 6; i <= sum / 2; i++) {
                that.$set(that.form, "p_" + i, "");
                that.$set(that.form, "s_" + i, "");
                that.totalNum.push(i);
              }
            }

            that.form = content;
          }
        });
      }
    },

    //重置表单
    onResetForm() {
      if (this.$refs.form) {
        this.form = {
          headTeacher: "",
          a_1: "",
          createTime: new Date(),

          p_1: "",
          s_1: "",
          p_2: "",
          s_2: "",
          p_3: "",
          s_3: "",
          p_4: "",
          s_4: "",
          p_5: "",
          s_5: "",
        };
      }
      this.totalNum = [1, 2, 3, 4, 5];
    },

    //确定
    onOK() {
      var data = { ...this.form };
      if (this.flag == "update") {
        data.id = this.id;
      }
      this.$emit("getFormData", data, "suggest", this.flag);
    },

    //取消
    onCancel() {
      this.$emit("update:meetVisible", false);
    },

    //增加问题与建议
    onAddSuggest() {
      this.totalNum.push(this.totalNum.length + 1);
      this.$set(this.form, "p_" + this.totalNum.length, "");
      this.$set(this.form, "s_" + this.totalNum.length, "");
    },

    //导出
    toPdf() {
      this.isPdf = true;
      this.$nextTick(() => {
        document.getElementById("twr-suggest-meet").classList.add("export-pdf-style");
        htmlToPdf.getPdfFromHtml('#twr-suggest-meet', this.$common.parseTime(new Date(this.form.createTime), '{y}-{m}-{d}') + '塔台班后讲评问题总结及解决措施/建议表');
        document.getElementById("twr-suggest-meet").classList.remove("export-pdf-style");
        this.isPdf = false;
      })
    },
  },
};
</script>
<style src="./meet-template.css" scoped></style>
<style scoped>
.add-suggest-btn {
  margin-top: 10px;
  width: 50%;
  font-weight: bold;
  font-size: 24px;
}

.meet-template >>> .el-textarea__inner {
  height: 115px;
}
</style>