实战场景描述

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

  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 = ''
          })

Logo

前往低代码交流专区

更多推荐