VUE+Element-ui 实战之新增和编辑按钮弹出框数据问题

实战场景描述

在实际开发中会有创建会弹出弹出框，填写数据，进行保存，再次点击创建，数据保留，点击编辑按钮弹出框页面数据置空。

1. 弹出框设置

   <el-dialog title="默认组"
                  width="30%"
                  :visible.sync="dialogFormVisible"
                  ref="form">
   
           <div class="form"
                v-show="dialogForm"
                v-for="(item,index) in List"
                :key="index"
                style="position: relative"
           >
             <el-form :model="form"
                      class="show"
                      :label-position="labelPosition"
                      style="text-align:left"
                      prop="defaultgrup"
                      ref="form"
             >
               <el-button icon="el-icon-minus"
                          @click="deleteItem(item,index)"
                          circle
                          style="font-size:10px;   position: absolute; left:1px"/>
   
               <el-form-item class="el-icon-remove-outline"
                             :label="&quot;实验组&quot;+index"
                             :label-width="formWidth"
                             prop="id"
               >
                 <el-input v-model="item.id"
                           style="width:430px"
                           autocomplete="off"/>
               </el-form-item>
   
               <el-form-item label="灰度" :label-width="formWidth" prop="date1" >
                 <el-input v-model="item.date1"
                           style="width:430px"
   
                           autocomplete="off"/>
               </el-form-item>
             </el-form>
           </div>
         <div slot="footer" class="dialog-footer">
           <el-button @click="dialogFormVisible = false">取 消</el-button>
           <el-button type="primary" @click="adddialog">保存</el-button>
         </div>
       </el-dialog>

2. 点击创建直接显示弹出框，点击编辑让数据等于空字符串。

   createtest() {
         this.dialogFormVisible = true
       },
       editVisible() {
         this.dialogFormVisible = true
         this.List.forEach(ele => {
           ele.id = ''
           ele.date1 = ''
         })