29.vue 实现动态表单，点击新增增加一行输入框

最新推荐文章于 2024-09-30 08:34:44 发布

越努力，越幸运..........

最新推荐文章于 2024-09-30 08:34:44 发布

阅读量4.7k

点赞数 9

分类专栏： js继承 html 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47254130/article/details/118944763

版权

js继承同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

存在一排必填，点击增加后会新增一行，点击每行后面的删除图标则会删除该行，新增按钮只会出现在最后一行
1.动态表单部分
在这里插入图片描述 2.data部分

3.方法

在这里插入图片描述

 <el-form ref="form" :rules="formRules" :inline="true" :model="form" label-width="80px">
        <div v-for="(item, index) in form.dynamicItem" :key="index">
          <el-form-item
            label="姓名"
            :prop="'dynamicItem.' + index + '.name'"
            :rules="{
            required: true, message: '姓名不能为空', trigger: 'blur'
        }"
          >
            <el-input v-model="item.name"></el-input>
          </el-form-item>
          <el-form-item
            label="手机号"
            :prop="'dynamicItem.' + index + '.phone'"
            :rules="[
             {required: true, message: '手机号不能为空', trigger: 'blur'},
              { pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
          ]"
          >
            <el-input v-model="item.phone"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button v-if="index+1 == form.dynamicItem.length" @click="addItem" type="primary">增加</el-button>
            <el-button v-if="index !== 0" @click="deleteItem(item, index)" type="danger">删除</el-button>
          </el-form-item>
        </div>
      </el-form>

 form: {
        dynamicItem: [
          {
            name: "",
            phone: ""
          }
        ]
      },

 addItem() {
      this.form.dynamicItem.push({
        name: "",
        phone: ""
      });
    },
    sure(form) {
      console.log(this.form.dynamicItem.length, "length");
      this.$refs[form].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    deleteItem(item, index) {
      this.form.dynamicItem.splice(index, 1);
      console.log(this.form.dynamicItem, "删除");
    },