vue点击按钮实现表单动态增加或删除数据的操作

小香菜籽

已于 2023-07-18 18:10:59 修改

阅读量6.6k

点赞数 5

分类专栏： vue项目中的问题（一）文章标签： vue.js javascript 前端

于 2022-10-13 17:55:12 首次发布

本文链接：https://blog.csdn.net/weixin_46858417/article/details/127305985

版权

vue项目中的问题（一）专栏收录该内容

26 篇文章 1 订阅

订阅专栏

第一版

1、简单样式展示

点击添加可追加行数
点击删除可删除行数，直至清空
在这里插入图片描述

  <el-form
          class="editTable"
          label-width="300px"
          :model="moveItem"
          :rules="rules"
          ref="moveItem"
        >
          <div class="rotate">
            <el-form-item
              v-for="(item, moveId) in moveLists"
              :key="moveId"
              label="轮转科室情况"
              prop="peopleIphone"
            >
              <el-input
                size="small"
                class="rotateYear"
                width="50"
                v-model="item.departmentStartName"
                auto-complete="off"
              ></el-input
              >科转至
              <el-input
                size="small"
                v-model="item.departmentEndName"
                auto-complete="off"
              ></el-input
              >科
            </el-form-item>
          </div>
        </el-form>
        <div class="rotateButton">
          <div>
            <el-button
              size="mini"
              icon="el-icon-plus"
              type="success"
              @click="addModule()"
              >添加
            </el-button>
          </div>
          <div>
            <el-button
              size="mini"
              icon="el-icon-delete"
              type="danger"
              @click="deleteModule()"
              >删除
            </el-button>
          </div>
        </div>

2、获取数据

 data() {
    return {
    moveLists: [],
      moveItem: {
        moveId: "",
        moveStartOffice: "",
        moveEndOffice: "",
        moveJobNum: "",
        departmentStartName: "",
        departmentEndName: "",
      },
    }
   }
   //连接接口获取后台数据
    getMovedata() {
      this.loading = true;
      this.moveJobNum = JSON.parse(localStorage.getItem("baseJobNum"));
      MoveInfos(this.moveJobNum)
        .then((res) => {
          this.loading = false;
          if (res.data.status == 500) {
            this.$message({
              type: "info",
              message: res.data.message,
            });
          } else {
            this.moveLists = res.data;
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error("数据加载失败，请稍后再试！");
        });
    },

3、实现添加和删除的方法

 addModule() {
      //新增一行
      this.moveLists.push(this.moveItem);
    },
    deleteModule() {
      //删除最后一行
      this.moveLists.splice(this.moveLists.length - 1, 1);
    },

第二版可以单独删除其中一项

1、样式如下

在这里插入图片描述

2、获取数据

  <div class="addButton">
        <el-button
          type="primary"
          round
          size="mini"
          icon="el-icon-plus"
          @click="addModule()"
          >添加轮转科室信息</el-button
        >
      </div>
   <div class="rotateInfo">
        <el-form
          label-width="250px"
          :model="moveItem"
          :rules="rules"
          ref="moveItem"
        >
          <div class="rotate">
            <el-form-item
              v-for="(item, moveId) in moveLists"
              :key="moveId"
              prop="peopleIphone"
              ><el-date-picker
                value-format="yyyy-MM-dd"
                v-model="item.moveYear"
                type="year"
                placeholder="选择年"
              >
              </el-date-picker
              >年<el-date-picker
                v-model="item.moveMonth"
                type="month"
                format="M月"
                value-format="M"
                placeholder="选择月"
              >
              </el-date-picker>
              月从
              <el-select
                v-model="item.moveStartOffice"
                filterable
                placeholder="请选择科室"
              >
                <el-option
                  v-for="item in departmentLists"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option> </el-select
              >科转至
              <el-select
                v-model="item.moveEndOffice"
                filterable
                placeholder="请选择科室"
              >
                <el-option
                  v-for="item in departmentLists"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option> </el-select
              >科
              <i class="el-icon-delete" @click="deleteModule(moveId)"></i>
              <el-divider></el-divider>
            </el-form-item>
          </div>
        </el-form>
      </div>

3、实现添加和删除的方法

      moveItem: {
        moveYear: "",
        moveMonth: "",
        moveStartOffice: "",
        moveEndOffice: "",
        moveLists: [], //添加时将moveObj加到这里
      },
     moveObj: {
        moveYear: "",
        moveMonth: "",
        moveStartOffice: "",
        moveEndOffice: "",
      },
 addModule() {
       this.moveItem .moveLists.push(Object.assign({}, this.moveObj));
    },
     deleteModule(index) {
      this.moveItem.moveLists.splice(index, 1);
    },