添加用户表单

src/components/users/users.vue

@@ -56,9 +56,28 @@
 
     </el-card>
 
-    <el-dialog title="提示" :visible.sync="dialogVisible">
+    <el-dialog title="添加用户" :visible.sync="dialogVisible">
       <!--内在主体区-->
-      <span>这是一段信息</span>
+
+      <el-form :model="addForm" :rules="rules" ref="addFormRef" label-width="70px" >
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="addForm.username"></el-input>
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input v-model="addForm.password" type="password"></el-input>
+        </el-form-item>
+        <el-form-item label="邮箱" prop="email">
+          <el-input v-model="addForm.email"></el-input>
+        </el-form-item>
+        <el-form-item label="手机" prop="mobile">
+          <el-input v-model="addForm.email"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
+          <el-button @click="resetForm('ruleForm')">重置</el-button>
+        </el-form-item>
+      </el-form>
+
       <!--底部区-->
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
@@ -75,6 +94,30 @@ export default {
   data () {
     return {
       dialogVisible: false,
+      addForm: {
+        username: '',
+        password: '',
+        email: '',
+        mobile: ''
+      },
+      rules: {
+        username: [
+          { required: true, message: '请输入用户名', trigger: 'blur' },
+          { min: 3, max: 10, message: '长度在3到10之间', trigger: 'blur' }
+        ],
+        password: [
+          { required: true, message: '请输入密码', trigger: 'blur' },
+          { min: 3, max: 10, message: '长度在3到10之间', trigger: 'blur' }
+        ],
+        email: [
+          { required: true, message: '请输入邮箱', trigger: 'blur' },
+          { min: 3, max: 10, message: '长度在3到10之间', trigger: 'blur' }
+        ],
+        mobile: [
+          { required: true, message: '请输入手机号', trigger: 'blur' },
+          { min: 3, max: 10, message: '长度在3到10之间', trigger: 'blur' }
+        ]
+      },
       queryInfo: {
         query: '',
         pagenum: 1,
@@ -85,6 +128,12 @@ export default {
     }
   },
   methods: {
+    submitForm (form) {
+
+    },
+    resetForm () {
+      this.$refs.addFormRef.resetFields()
+    },
     handleSizeChange (val) {
       this.queryInfo.pagesize = val
       this.getUserList()