vue+element动态增加页面内容+删除页面内容+验证输入内容

html页面
在v-for循环plans数组，并且绑定值

<div v-for="(item,index) in dataForm.plans">
  <el-row>
    <h2 style="font-size:20px;padding-left:40px" v-if="index == 0">添加计划信息h2>
    <el-col :span="11">
      <el-form-item :prop="'plans.' + index + '.stage'"
                    :rules="{required: true, message: '项目阶段不能为空', trigger: 'blur'}">
        <label slot="label">项目阶段       label>
        <el-select v-model="item.stage" placeholder="请选择" style="width: 100%;"
                   @change="onChangeStatusOptions"
                   clearable>
          <el-option
            v-for="status in statusOptions"
            v-show="status.id == item.stage || !selectIds.includes(status.id)"
            :key="status.name"
            :label="status.name"
            :value="status.id">
          el-option>
        el-select>
      el-form-item>
      <el-form-item label="计划开始时间" style="display: inline-block"
                    :prop="'plans.' + index + '.planStartTime'"
                    :rules="{required: true, message: '计划开始时间不能为空', trigger: 'blur'}">
        <el-date-picker
          v-model="item.planStartTime"
          type="date"
          placeholder="开始日期"
          value-format="yyyy-MM-dd"
          style="width: 200px">
        el-date-picker>
        ~
        <el-form-item style="display: inline-block"
                      :prop="'plans.' + index + '.planEndTime'"
                      :rules="{required: true, message: '计划结束日期不能为空', trigger: 'blur'}">
          <el-date-picker
            v-model="item.planEndTime"
            type="date"
            placeholder="结束日期"
            value-format="yyyy-MM-dd"
            style="width: 200px">
          el-date-picker>
        el-form-item>
      el-form-item>
      <el-form-item label="实际开始时间">
        <el-date-picker
          v-model="item.actualStartTime"
          type="date"
          placeholder="开始日期"
          value-format="yyyy-MM-dd"
          style="width: 200px">
        el-date-picker>
        ~
        <el-date-picker
          v-model="item.actualEndTime"
          type="date"
          placeholder="结束日期"
          value-format="yyyy-MM-dd"
          style="width: 200px">
        el-date-picker>
      el-form-item>
    el-col>
    <el-col :span="12" style="padding-left: 5%">
      <el-form :model="dataForm" :rules="dataRule" ref="" @keyup.enter.native="dataFormSubmit()"
               label-width="auto"
               label-position="top">
        <el-form-item label="推迟原因">
          <el-input type="textarea" placeholder="推迟原因" :Rows="5"
                    v-model="item.delayReasons">el-input>
        el-form-item>
      el-form>
    el-col>
  el-row>
  <el-button v-if="index == dataForm.plans.length-1" style="margin-left: 40px" @click="addPlans()"
             type="primary"
             round>
    添加项目阶段
  el-button>
  <el-button style="margin-left: 40px" v-if="index != 0" @click="removePlans(index,item)" round>删除该阶段
  el-button>
  <el-divider>el-divider>
  <div style="width: 90%;text-align: center">
  div>
div>

动态添加的下拉列表不能选择同一个值
下拉列表每选择一次触发该方法，把已绑定的值存进selectIds数组。

// 选择阶段操作
onChangeStatusOptions () {
     
  this.selectIds = []
  for (const item of this.dataForm.plans) {
     
    if (item.stage) {
     
      this.selectIds.push(item.stage)
    }
  }
},

v-show 先判断是否是当前选中的值 不是的话 判断如果 selectIds数组中存在该值 则不显示

          <el-option
            v-for="status in statusOptions"
            v-show="status.id == item.stage || !selectIds.includes(status.id)"
            :key="status.name"
            :label="status.name"
            :value="status.id">
          el-option>

追加页面

// 添加计划
addPlans () {
     
  this.dataForm.plans.push({
     
    'stage': '',
    'planStartTime': '',
    'planEndTime': '',
    'actualStartTime': '',
    'actualEndTime': '',
    'delayReasons': ''
  })
},

删除一个追加的页面

// 删除计划
removePlans (index, item) {
     
  this.selectIds.forEach((item1, index1) => {
     
    if (item1 === item.stage) {
     
      this.selectIds.splice(index1, 1)
    }
  })
  this.dataForm.plans.splice(index, 1)
}