vue-element动态表单

项目场景:

提示: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 });
    },

}
  


页面:

在这里插入图片描述
在这里插入图片描述


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值