vue表单模块加减

1.图示

点击加号:模块可以自己增加,如下

点击减号:模块可以从下面减

2.代码

        <div style="position: relative;">
            <div v-for="item in arryList">
              <el-row style="text-align: left;height: 120px; background-color:#F9F9F9; padding-top: 20px;" class="rowlay">
                <el-col :span="5" style="text-align: left;margin-left: 40px;">
                  <p class="gf_text">标题一</p>
                  <el-date-picker
                    v-model="form.creationDate"
                    style="width: 270px;"
                    type="date"
                    placeholder="选择日期"
                  />
                </el-col>
                <el-col :span="5" style="margin-left: 40px;">
                  <p class="gf_text">标题二</p>
                  <el-date-picker
                    v-model="form.creationDate"
                    style="width: 270px;"
                    type="date"
                    placeholder="选择日期"
                  />
                </el-col>
                <el-col :span="5" style="margin-left: 40px;">
                  <p class="gf_text">标题三</p>
                  <el-input v-model="item.documentNumber" style="width: 250px;" placeholder="请输入" />
                </el-col>
                <el-col :span="5" style="margin-left: 40px;">
                  <p class="gf_text">标题四</p>
                  <el-input v-model="item.documentNmber" style="width: 250px;" placeholder="请输入" /></el-col>
              </el-row>

            </div>
            <span style="display: flex;flex-direction: column;position: absolute;right: 50px;bottom: 0px;">
              <div @click="reducePart">
                <img style="width: 28px;height: 28px;" src="../../../assets/images/reduceone.png">
              </div>
              <div style="margin-top: 12px;" @click="addPart">
                <img style="width: 28px;height: 28px;" src="../../../assets/images/addone.png">
              </div>
            </span>
          </div>


data() {
    return {
   arryList: [
        {
          itemNumber: '888',
          archiveNumber: '5',
          documentNumber: '4',
          documentNmber: '王'
        }
      ],
  },
medthods:{
   reducePart() {
      if (this.arryList.length > 0) {
        this.arryList.splice(this.arryList.length - 1, 1)
      }
    },
    addPart() {
      this.arryList.push({})
    }
}
}