el-form动态添加表单

最新推荐文章于 2024-07-11 15:25:32 发布

士居坡东

最新推荐文章于 2024-07-11 15:25:32 发布

阅读量1.6k

点赞数 1

文章标签： javascript 前端 vue.js vue elementui

本文链接：https://blog.csdn.net/qq_43977829/article/details/125064506

版权

html部分

      <el-form :model="addForm" ref="addForm" label-width="100px" style="width:640px;margin:0 auto">    
        <div v-for="(i, index) in addForm.plus" style="position: relative">
              <el-form-item label="名称" :key="`名称${index}`" :prop="'plus.' + index + '.name'">
                <el-input v-model="i.name"></el-input>
              </el-form-item>
              <el-form-item label="id" :key="`id${index}`" :prop="'plus.' + index + '.id'">
                <el-input v-model="i.id"></el-input>
              </el-form-item>
           <i class="el-icon-circle-plus-outline" style="font-size:18px;cursor:pointer;position:absolute;right:-30px;top:10px" @click="addPlus"></i>//增加按钮
          <i @click.prevent="removePlus(i)" class="el-icon-remove-outline" style="font-size:18px;cursor:pointer;position:absolute;right:-60px;top:10px"></i> //删除按钮
        </div>

js部分

data(){
 return{
addForm: {
        plus: [
          {
            name: "",
            id: "",
          },
        ],
      },
 }
}

methods:{
    removePlus(item) {
      var index = this.addForm.plus.indexOf(item);
      if (index !== -1) {
        this.addForm.plus.splice(index, 1);
      }
    },
    addPlus() {
      this.addForm.plus.push({
        name: "",
        id: "",
        key: Date.now(),
      });
    },
}