Vue+Element+JS动态生成form表单实现新增和删除操作

效果图：【添加或修改学生对话框】

【原始表单学号和姓名】

【动态表单学号和姓名】

核心代码

【添加或修改学生对话框按钮】

<el-col :span="1.5">
	<el-button
	    type="primary"
	    icon="el-icon-plus"
	    size="mini"
	    @click="handleInsert"
	    v-hasPermi="['user:student:insert']"
	    >新增</el-button
	  >
</el-col>
<el-col :span="1.5">
	  <el-button
	    type="success"
	    icon="el-icon-edit"
	    size="mini"
	    :disabled="single"
	    @click="handleUpdate"
	    v-hasPermi="['user:student:update']"
	    >修改</el-button
	  >
</el-col>

【index.vue】

<!-- 添加或修改学生对话框 -->
<el-dialog :title="title" v-if="open" :visible.sync="open" width="800px" append-to-body>
  <el-form ref="form" :model="form" :rules="rules" label-width="120px">
  	<!-- 原始表单学号和姓名 -->
    <el-row>
      <el-col :span="12">
        <el-form-item label="学号" prop="studentId">
          <el-input v-model="studentId" placeholder="请输入学号" />
        </el-form-item>
      </el-col>
      <el-col :span="11">
        <el-form-item label="姓名" prop="roomUrl">
          <el-input v-model="studentName" placeholder="请输入姓名" />
        </el-form-item>
      </el-col>
      <el-button
        size="medium"
        type="text"
        icon="el-icon-circle-plus"
        @click="addItem"
      />
    </el-row>
    <!-- 动态表单学号和姓名 -->
    <el-row v-for="(item, index) in studentList" :key="index">
      <el-col :span="12">
        <el-form-item
          label="学号"
        >
          <el-input v-model="item.studentId" placeholder="请输入学号" />
        </el-form-item>
      </el-col>
      <el-col :span="11">
        <el-form-item
          label="姓名"
        >
          <el-input v-model="item.studentName" placeholder="请输入姓名" />
        </el-form-item>
      </el-col>
      <el-button
        size="medium"
        type="text"
        icon="el-icon-delete"
        @click="delItem(index)"
      />
    </el-row>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitForm">确 定</el-button>
    <el-button @click="cancel">取 消</el-button>
  </div>
</el-dialog>

export default {
  name: "Student",
  data() {
    return {
      // 学生列表信息
      studentList: [
        {
          studentId: "",
          studentName: "",
        },
      ],
      // 学号
      studentId: "",
      // 姓名
      studentName: "",
      // 在列表的开头添加数据
      studentListParam: [],
      // 删除列表第一个元素
      studentListByDeleteFirst: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
    };
  }，
}

created() {
    this.getList();
    //所有关于getList()方法省略
},
methods:{
    /** 动态添加&删除学号和姓名 */
    addItem() {
      this.studentList.push({
        studentId: "",
        studentName: "",
      });
    },
    delItem(index) {
      this.studentList.splice(index, 1);
    },
}

【添加或修改用户对话框】

methods:{
	/** 新增按钮操作 */
	handleInsert() {
	  this.reset();
	  this.open = true;
	  this.studentList = [];
	  this.title = "添加学生";
	},
	/** 修改按钮操作 */
	handleUpdate(row) {
	  this.reset();
	  const id = row.id || this.ids;
	  getStudent(id).then((response) => {
	    // 对话框表单数据回显
	    this.form = response.data;
	    this.title = "修改学生";
	  });
	  getStudentList(id).then((response) => {
	    this.studentList = response.data;
	    // 原始表单回显
	    // 方法一
	    // this.studentId = this.studentList[0].studentId;
	    // this.studentName = this.studentList[0].studentName;
	    // 方法二
	    // let data = JSON.parse(JSON.stringify(this.studentList[0]));
	    // this.studentId = data.studentId;
	    // this.studentName = data.studentName;
	    // 方法三
	    let data = JSON.parse(JSON.stringify(this.studentList[0]));
	    this.$set(this, "studentId", data.studentId);
	    this.$set(this, "studentName", data.studentName);
	    // 删除列表第一个元素（回显在原始表单的元素）
	    // 方法一
	    // this.studentListByDeleteFirst = this.studentList.filter(
	    //   (value, index) => {
	    //     return index !== 0;
	    //   }
	    // );
	    // 方法二
	    this.studentListByDeleteFirst = this.studentList.slice(1);
	    // 动态表单回显
	    this.studentList = this.studentListByDeleteFirst;
	    this.open = true;
	  });
	},
	/** 提交按钮 */
	submitForm() {
	  this.$refs["form"].validate((valid) => {
	    if (valid) {
	      // 初始化表单列表
	      this.studentListParam = [];
	      // 将原始表单数据添加到初始化表单列表的第一个元素
	      this.studentListParam.unshift({
	        studentId: this.student,
	        studentName: this.studentName,
	      });
	      // 如果返回的列表不为空
	      if (this.studentList != null && this.studentList.length > 0) {
	        // 两个列表合并，即将所有行数据存入表单列表
	        this.studentListParam.push.apply(
	          this.studentListParam,
	          this.studentList
	        );
	      }
	      // 将数据赋值给form表单进行新增或修改操作
	      this.form.studentList = this.studentListParam;
	      if (this.form.id != null) {
	        updateStudent(this.form).then((response) => {
	          if (response.code === 200) {
	            this.msgSuccess("修改成功");
	            this.open = false;
	            this.getList();
	          }
	        });
	      } else {
	        insertStudent(this.form).then((response) => {
	          if (response.code === 200) {
	            this.msgSuccess("新增成功");
	            this.open = false;
	            this.getList();
	          }
	        });
	      }
	    }
	  });
	},
}