更新用户管理页面并添加存储本地功能

---

前言

之前的增加和删除功能不优雅，给它优化一下。目标增加时弹出对话框，然后进行单独增加操作。进行修改时可以跟增加共一个对话框进行修改

---

一、增加对话框

继续基于element官网，插入对话框，并加入表单元素
代码如下：

<el-dialog title="用户信息" :visible.sync="dialogFormVisible" >
  <el-form ref="form" :model="form" >
      <el-form-item label="工号">
        <el-input v-model="form.num"></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="form.userName"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add" v-show="change">新建</el-button>  
        <el-button @click="close">关闭</el-button>
      </el-form-item>
  </el-form>
</el-dialog>

效果如下

其中add方法如下

add:function(){
      
      this.change=true //为新建按钮，控制显示隐藏
       var data ={
        num:this.form.num,
        userName:this.form.userName,
        name:this.form.name
      }
        //验证是否为空?待实现
    
          if (this.tableData.findIndex(i => i.userName == data.userName) != -1) { 
              alert('用户名' + data.userName + '已经存在，请确认！');
               return false; 
            }//验证是否重复

          this.tableData.push(data)
          this.dialogFormVisible=false //控制对话框显示隐藏
          localStorage.setItem('list', JSON.stringify(this.tableData))//存储本地
          this.length++//工号自动加一
      
    },

效果如下

二、优化修改

先看代码

 edit:function(index,row){
      this.dialogFormVisible = true
      this.change=false
      this.$message('请直接修改');
      this.form=row		//获取数据
      if(this.form.num>0&&this.form.userName&&this.form.name){
        this.tableData[index].num=this.form.num
        this.tableData[index].userName=this.form.userName
        this.tableData[index].name=this.form.name 
        localStorage.setItem('list', JSON.stringify(this.tableData))
      }  
    }

效果如下

总结

美化界面，完善数据存储，验证是否为空有待完善，希望评论区有大佬指教。