新增用户ui界面的实现

最新推荐文章于 2022-10-23 14:11:32 发布

DD小兄弟

最新推荐文章于 2022-10-23 14:11:32 发布

阅读量444

点赞数

分类专栏：用户管理文章标签： ui vue.js elementui

本文链接：https://blog.csdn.net/qq_64757356/article/details/127302160

版权

本文详细介绍了如何利用Vue.js和ElementUI库创建用户UI界面，包括设置界面框架，控制模态框的显示和关闭，以及处理handleClose事件来管理用户确认、取消或关闭操作，并详细讨论了添加用户表单数据的实现步骤。

摘要由CSDN通过智能技术生成

1、用户ui界面框架

2、控制模态框的显示/隐藏

3、 handleClose事件控制确认/取消或关闭模态框

4、添加用户的form数据

1、用户ui界面框架

<el-button type="primary" @click="dialogVisible = true">+新增</el-button> 

<el-dialog
    v-model="dialogVisible"
    title="新增用户"
    width="35%"
    :before-close="handleClose"
  >
    <el-form :inline="true" :model="formUser" >

      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名">
            <el-input v-model="formUser.name" placeholder="请输入姓名" />
          </el-form-item>
        </el-col>
      <el-col :span="12">
        <el-form-item label="年龄">
          <el-input v-model="formUser.age" placeholder="请输入年龄" /