vue-element动态表单

范儿斯

已于 2023-09-25 14:57:03 修改

阅读量145

点赞数

文章标签： vue.js javascript 前端

于 2023-09-25 14:56:18 首次发布

本文链接：https://blog.csdn.net/Leader_yuxi/article/details/133272924

版权

项目场景：

提示：vue-element动态表单：

例如：项目场景：vue-element动态表单

模板代码

      <el-form ref="formBuild" :model="formBuild" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="项目名称">
              {{ formBuild.projectName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-for="(item, index) in formBuild.inputOpation" :key="index">
          <el-col :span="18">
            <el-form-item :label="item.lable" :prop="'inputOpation.' + index + '.name'" :rules="[{ required: true, message: '请输入楼栋名称', trigger: 'blur' }]">
              <el-input v-model="item.name" placeholder="请输入楼栋名称" />
            </el-form-item>
          </el-col>
          <el-col :span="2" :offset="1">
            <i
              @click="deleteRow(index)"
              style="font-size: 26px; color: #2e93fd; margin-top: 4px"
              class="el-icon-remove-outline"
            ></i>
          </el-col>
          <el-col :span="2" v-if="item.showAdd">
            <i
              @click="addRow"
              style="font-size: 26px; color: #2e93fd; margin-top: 4px"
              class="el-icon-circle-plus-outline"
            ></i>
          </el-col>
        </el-row>
      </el-form>

js代码

export default {
  data() {
    return {
      title: "",
      openBuild: false,
      formBuild: {},

  },
    created() {
    this.rest();
  },
    methods: {
    // 表单重置
    reset() {
      this.formBuild = {
        projectId: undefined,
        projectName: undefined,
        name: undefined,
        id: undefined,
        inputOpation: [{projectId:undefined,projectName:undefined, lable: "楼栋", name: "", showAdd: true }],
      };

      
      this.resetForm("form");
      this.resetForm("formBuild");
      this.resetForm("formFloor");
    },
        deleteRow(index) {
      if (this.formBuild.inputOpation.length < 2) {
        this.$modal.msgError("不可删除!");
        return;
      }
      this.$modal
        .confirm("确定删除此项?")
        .then(() => {
          this.formBuild.inputOpation.forEach((v, i) => {
            if (i === index) {
              this.formBuild.inputOpation.splice(i, 1);
            }
          });

                //删除后再次更新
          this.formBuild.inputOpation.forEach((v, i) => {
            // 始终保持最后一位有showAdd=true
            if (i === this.formBuild.inputOpation.length - 1) {
              console.log("删除后再次更新",this.formBuild.inputOpation.length - 1);
              v.showAdd = true;
            }
            // 始终保持第一位有lable="楼栋"
            if (i === 0) {
              v.lable = "楼栋";
            }
          });



        })
        .catch(() => {});


    },

    addRow() {
      this.formBuild.inputOpation.forEach((v, i) => {
        v.showAdd = false;
        v.projectId = this.formBuild.projectId;
        v.projectName = this.formBuild.projectName;
      });
      this.formBuild.inputOpation.push({projectId:this.formBuild.projectId,projectName:this.formBuild.projectName, lable: "", name: "", showAdd: true });
    },

}