其他分享
首页 > 其他分享> > Vue Dialog 本页面弹窗新增用户

Vue Dialog 本页面弹窗新增用户

作者：互联网

按钮

 <el-button type="primary" style="height: 40px" @click="addUser()"
        >新建用户</el-button
      >

框架

 <!--弹窗表单-->
    <!-- dialogFormVisible控制弹窗true为弹出 false为消失 -->
    <!-- width="550px" 可控制整个表单随页面变化居中 -->
    <!-- center="true"使表单 头（标题）  尾（取消和确定按钮）居中 -->
    <!-- size="mini"  size="medium" 控制整个el-form-item大小中 -->
    <el-dialog
      title="新建用户"
      :visible.sync="dialogFormVisible"
      class="dialog"
      center="true"
      width="550px"
    >
      <el-form ref="form" :model="form" label-width="auto" class="form">
        <el-form-item label="姓名:" label-width="150px" size="medium">
          <el-input v-model="form.userName" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="联系方式：" label-width="150px" size="medium">
          <el-input v-model="form.linkNum" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="密码：" label-width="150px" size="medium">
          <el-input v-model="form.password" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item
          label="角色"
          style="width: 300px"
          label-width="150px"
          size="mini"
        >
          <el-select
            v-model="form.roleId"
            placeholder="请选择职位"
            style="width: 200px"
          >
            <el-option
              v-for="item in roleInfo"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureInsertUser()">确 定</el-button>
      </div>
    </el-dialog>

表单元素初始化及弹窗元素设置为不可见

form: {
        userName: null,
        linkNum: null,
        password: null,
        roleId: null,
      },
      //弹窗
      dialogFormVisible: false,
      roleInfo: [],

 

先触发按钮修改弹窗为true

打开弹窗新增信息

//     先调用按钮修改dialogFormVisible为true
// 才能打开弹窗
    // 添加用户
    addUser() {
      this.dialogFormVisible = true;
    },
    sureInsertUser() {
      this.$axios({
        url: "/user/insertUser",
        method: "post",
        data: {
          userName: this.form.userName,
          linkNum: this.form.linkNum,
          password: this.form.password,
          roleId: this.form.roleId,
        },
      }).then((res) => {
        if (res.data == "新增成功") {
          this.dialogFormVisible = false;
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.queryByPage(this.currentPage, this.size);
          // 清除历史新增
          this.form.userName = null;
          this.form.linkNum = null;
          this.form.password = null;
          this.form.roleId = null;
        } else {
          this.$message.error("新增失败");
        }
      });
    },

 

 

  

TRANSLATE with x English
Arabic Hebrew Polish
Bulgarian Hindi Portuguese
Catalan Hmong Daw Romanian
Chinese Simplified Hungarian Russian
Chinese Traditional Indonesian Slovak
Czech Italian Slovenian
Danish Japanese Spanish
Dutch Klingon Swedish
English Korean Thai
Estonian Latvian Turkish
Finnish Lithuanian Ukrainian
French Malay Urdu
German Maltese Vietnamese
Greek Norwegian Welsh
Haitian Creole Persian  
  TRANSLATE with COPY THE URL BELOW Back EMBED THE SNIPPET BELOW IN YOUR SITE Enable collaborative features and customize widget: Bing Webmaster Portal Back

标签：Vue,form,linkNum,roleId,Dialog,null,true,弹窗
来源： https://www.cnblogs.com/lyj0810/p/16325256.html