其他分享
首页 > 其他分享> > 项目四:后台用户管理系统(五):用户添加方法

项目四:后台用户管理系统(五):用户添加方法

作者：互联网

好家伙,

 

我的用户添加方法炸了,

所以,去找别的方案代替吧,

饿了么UI我来了,再见了原生vue

 

1.用户列表

<el-table
      :data="userlist"
      style="width: 100%">
      <el-table-column
        prop="username"
        label="用户名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="password"
        label="密码"
        width="180">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="180">
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="手机">
      </el-table-column>
    </el-table>

其对应数据

userlist: [
        { id: 1, username: '嬴政', age: 18, position: '始皇帝' },
        { id: 2, username: '李斯', age: 35, position: '丞相' },
      ],

必须是数组,不然会报错

效果如下

 

 

 

2.对话框视图(用户添加界面)

<el-col :span="4">
    <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
    </el-col>

    <el-dialog title="提示" :visible.sync="addDialogVisible" width="50%">
    <!-- 内容主体区 -->
     <el-form :model="addUserForm" :rules="addUserFormRules" ref="addUserFormRef" label-width="70px">
    <el-form-item label="用户名" prop="username"> 
      <!-- prop是验证规则属性 -->
      <el-input v-model="addUserForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="addUserForm.password" type="password"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="addUserForm.email"></el-input>
    </el-form-item>
    <el-form-item label="手机" prop="mobile">
      <el-input v-model="addUserForm.mobile"></el-input>
    </el-form-item>
  </el-form>
 <!-- 底部区 -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="adduser()">确 定</el-button>
  </span>
    
    </el-dialog>

这里我们用上了element-UI的对话框元素(dialog)和表单(form)元素去实现添加用户的界面

 

 

 (看上去像模像样的)

 

随后我们使用一个

addDialogVisible: false

来控制对话框的视图是否显示

 

 

3.添加用户功能的实现

在对话框的结尾处为确定按钮绑定一个点击触发方法

<el-button type="primary" @click="adduser()">确 定</el-button>

adduser方法:

adduser(){
      this.ddDialogVisible = false,
      //将对话框关闭
      this.userlist.push(this.addUserForm),
      //将新用户的数据添加到用户列表中
      console.log(this.addUserForm)
      console.log(this.userlist)
      //测试用数据
    }

效果如下

 

 

4.表单重置功能

再次点开添加用户会发现,表单中的数据没有清除

所以我们来添加一个表格重置的功能

 

我们来一个element-ui官方的表单重置方法

 

在对话框组价的头部为其添加一个关闭触发方法

 <el-dialog title="提示" :visible.sync="addDialogVisible" width="50%" @close="closed">

随后,

closed(){
      
      this.$refs.addUserForm.resetFields()
    
      console.log("closed方法被触发")
    }
resetFields()是一个重置表单的方法,
但是仍然报错

在百度后,我得知是因为Dialog是隐藏元素,它没有被渲染到DOM树中,所以他无法
所以当this.$refs.addUserForm时,得到的是undefined,方法也无法调用
在使用了两种解决方案后,依旧报错,其无法重置表单

方法一:
this.$nextTick(()=>{
        this.$refs.addUserForm.resetFields()
      })
this.$nextTick将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
没得用,寄了

  方法二:

if(this.$refs.addUserForm!==undefined){
        
      this.$refs.addUserForm.resetFields()
      }

  等于undefined直接跳过了,直接寄了



于是我们换一个简单粗暴的方法,不能重置表单,那直接把对象清空不就好了,同样是重置了数据
直接给表单的数据赋值一个空的对象
closed(){
      
      this.addUserForm={}
    
      console.log("closed方法被触发")
    }

  表单的重置就完成了

 

  随后发生了一件神奇的事情

  前面使用resetFields(),出现报错且无法重置表单

 

  但后面我想截图一张报错信息的时候,它又神奇的能重置了并且不报错

 

  前端之美,一头雾水

  (叹气....)

 

 

 

 

 

 

5.补充

5.1.报错提示

this.$el.querySelectorAll is not a function

来到element-ui官网下面规定了data的数据必须是array类型的,所以把数据类型改一下就好了

 

5.2.表单可以添加规则,限制密码的组合,限制邮件的格式之类的

 

全部代码如下:

<template>
  <div>
    <!-- 标题 -->
    <h4 class="text-center">用户管理</h4>
    <!-- 用户添加按钮 -->
    <el-col :span="4">
    <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
    </el-col>

    <el-dialog title="提示" :visible.sync="addDialogVisible" width="50%" @close="closed">
    <!-- 内容主体区 -->
     <el-form :model="addUserForm" :rules="addUserFormRules" ref="addUserFormRef" label-width="70px">
    <el-form-item label="用户名" prop="username"> 
      <!-- prop是验证规则属性 -->
      <el-input v-model="addUserForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="addUserForm.password" type="password"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="addUserForm.email"></el-input>
    </el-form-item>
    <el-form-item label="手机" prop="mobile">
      <el-input v-model="addUserForm.mobile"></el-input>
    </el-form-item>
  </el-form>
 <!-- 底部区 -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="adduser()">确 定</el-button>
  </span>
    
    </el-dialog>


    <!-- 用户列表 -->
     <el-table
      :data="userlist"
      style="width: 100%">
      <el-table-column
        prop="username"
        label="用户名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="password"
        label="密码"
        width="180">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="180">
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="手机">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'MyUser',
  data() {
    return {
      // 用户列表数据
      userlist: [
        { username: "胖虎", password: 123456789, email: 7897987987, mobile:78797987 },
        { username: "蔡羽", password: 123456789, email: 7897987987, mobile:78797987 },
      ],
      
      addDialogVisible: false, //控制添加用户对话框的显示与隐藏

      addUserForm:{},
      //添加表单的验证规则对象
      addUserFormRules: {
        // username: [{required:true,message:'请输入用户名',trigger:'blur'},
        // {min:3,max:10,message:'用户名长度在3~10个字符',trigger:'blur'}],
        // password: [{required:true,message:'请输入密码',trigger:'blur'},
        // {min:6,max:15,message:'密码长度在6~15个字符',trigger:'blur'}],
        // email: [{required:true,message:'请输入邮箱',trigger:'blur'}],
        // mobile: [{required:true,message:'请输入手机号',trigger:'blur'}]
      } 

    }
  },
  methods: {
    adduser(){
      
      this.userlist.push(this.addUserForm),
      //将新用户的数据添加到用户列表中
      console.log(this.addUserForm)
      console.log(this.userlist)
      //测试用
      this.addDialogVisible = false
      //将对话框关闭
    },
    closed(){
      if(this.$refs.addUserForm!==undefined){
        
      this.$refs.addUserForm.resetFields()
      }
      console.log("closed方法被触发")
    }

  }
}
</script>

<style lang="less" scoped></style>

 

 

 

 

大概就是这样了

 

标签：管理系统,addUserForm,重置,用户,表单,添加,后台,对话框
来源： https://www.cnblogs.com/FatTiger4399/p/16456149.html