vue elementUI 新增弹出框

@[vue elementUI](点击按钮弹出 el-dialog)

vue elementUI 新增弹出框

开整 直接来代码

效果图

点击审核按钮是弹出模态框

没有选择状态 点击确定时

审核状态为成功时

审核状态为失败时

这个可以解决模态框弹出的时候有一层阴影 的问题 具体可以参考官方文档

:modal-append-to-body="false"

<el-button type="success" @click="addgsForm(scope.row.id)" icon="el-icon-edit">审核</el-button>

         <el-dialog :title="title" width="30%" :visible.sync="dialogAddgsVisible" @close="closeDialogAddgsVisible" :modal-append-to-body="false">
           <el-form :model="addForm"  ref="addForm" label-width="100px">

               <el-form-item label="审核状态"
                    prop="stauts">
        <el-select v-model="addForm.stauts"
                   style="width: 75%"
                   placeholder="点击选择审核状态">
          <el-option v-for="item in ptypeList"
                     :key="item.key"
                     :label="item.value"
                     :value="item.key">
          </el-option>
        </el-select>
      </el-form-item>

        <el-form-item label="失败原因"
                    v-if="addForm.stauts==1"
                    prop="defreason">
        <el-input v-model="addForm.defreason"  
                  style="width: 75%"
                  placeholder="请填写失败原因"></el-input>
      </el-form-item>

            </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogAddgsVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveAddForm()">确 定</el-button>
        </span> 
         </el-dialog>

**在data中要先声明表单中的属性以及模态框的默认状态等 **

 addForm:{

        defreason: "",
        stauts: "",

      },
      ptypeList: [
        { key: "0", value: "成功" },
        { key: "1", value: "失败" },
      ],
      title:"",
      dialogAddgsVisible: false,
      dataList: [],
      // 对话框显示与否
      dialogVisible: false,
      dataloading: false,

在methods中的方法 点击时弹出模态框 传参 关闭 等等

/**
       *点击新增按钮，弹出新增模态框
       * @param
       */
      addgsForm(id){
        this.appid=id;
        this.dialogAddgsVisible = true;
        this.title="请填写原因"
      },
      /**
       *关闭或取消模态框，清空值
       * @param
       */
      closeDialogAddgsVisible(){
        // console.log( "11111111111111111111",this.$refs)
        // console.log( "22222222222222222222",this.addForm)
        this.$refs.addForm.resetFields();//element封装的方法,清空模态框的值
        this.title="" //初始化title的值
        this.addForm={//初始化addForm中的值
          defreason:"",
          stauts:"",
        }
      },

      /**
       *确定新增数据
       * @param
       */
      saveAddForm(){
          
        //this.$refs[this.addForm].validate( (valid) => {
          //alert(this.appid)
          console.log(this.addForm)
          if(this.addForm.stauts == ""){
              this.$message("请选择审核状态");
              return;
          }
          if(this.addForm.stauts == 0){
              this.addForm.defreason="符合要求" 
          }
           http
              .post("/photoRecord/save/"+this.addForm.stauts+"/"+this.addForm.defreason+"/"+this.appid,this.addForm.stauts,this.addForm.defreason,this.appid)
              .then(res =>{
                console.log(res)
                this.dialogAddgsVisible = false;
                //this.init()
                this.getDataList();
              })
              //setTimeout(function(){  this.getDataList()}, 0);
        //})
      },

本文链接https://blog.csdn.net/qq_43025316/article/details/106690128