• 欢迎光临~

Vue Dialog 本页面弹窗新增用户

开发技术 开发技术 2022-05-29 次浏览

按钮

 <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 Vue Dialog 本页面弹窗新增用户 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  
Vue Dialog 本页面弹窗新增用户
Vue Dialog 本页面弹窗新增用户 Vue Dialog 本页面弹窗新增用户 Vue Dialog 本页面弹窗新增用户
 
TRANSLATE with Vue Dialog 本页面弹窗新增用户
COPY THE URL BELOW
Vue Dialog 本页面弹窗新增用户
Vue Dialog 本页面弹窗新增用户 Back
EMBED THE SNIPPET BELOW IN YOUR SITE Vue Dialog 本页面弹窗新增用户
Enable collaborative features and customize widget: Bing Webmaster Portal
Back
程序员灯塔
转载请注明原文链接:Vue Dialog 本页面弹窗新增用户
喜欢 (0)