VUE+Element实现增删改查的示例源码

前言

&最近因为一些原因，没有更博客，昨天老师布置了一个作业，用vue实现增删改查功能，想想这也不难，就做一下试试吧。
因为自己写的样式没有别人做的好，因此我想用现成的UI框架，一直也没用过Element，就干脆趁机学一下吧。

实验步骤

首先引入一下element的css以及js

然后引入需要用到的vue相关的js文件

下面说一下HTML结构

这一段是element的表单以及编辑等样式，其中添加了一些click操作后面需要用到

加上基础的样式

 
    #app{
      width:1024px;
      margin: 0 auto; 
    }
    .add-btn{
      margin-top: 20px;
      width: 100%;
    }
    .body{
      margin-top:20px;
    }

现在页面的基本样式就做好了，如下图所示：

下面开始写vue代码，对各个功能进行处理操作
了解过vuejs的应该知道这样的结构 data里面填写我们获取的数据一些规则，定义一些变量，在methods进行我们的操作。

new Vue({
  el: '#app',
    data:{},
    methods:{}
})

data: function(){
 return{
   userInfo:{ 
     name:'',
     position: '',
     major: '',
     number: '',
   },
   tabledata: [{
     name:'互联网+学院',
     position: '专职教师',
     major: '对外贸易',
     number: '2',
   },{
     name:'徐州重工',
     position: '工厂车研发部工程师',
     major: '精密机械制造',
     number: '12',
   },{
     name:'北京青码科技',
     position: '前端开发工程师',
     major: 'Vue、React',
     number: '4',
   }
   ],
   dialogVisible: false, 
   editObj:{
     name:'',
     position: '',
     major: '',
     number: '',
   },
   userIndex:0,
 }
      },

接下来我们添加methods

addUser() 是添加数据
delUser()是删除数据
editUser()是编辑数据
handleClose()是是否弹出编辑框
confirm()是确认信息并且传数据到表格中

在增加模块中，我做了信息判断，如果是信息是空就会弹出提示框，显示信息不能为空，
在删除模块中，点击可以删除一行信息
在修改模块中，会先将原本的信息拿到，然后再修改你需要修改的信息。

 methods:{
//添加
 addUser(){
   if(!this.userInfo.name){
     this.$message({
message: '请输入你的公司名！',

     });
     return;
   }
   if(!this.userInfo.position){
     this.$message({
message: '请输入你的职位！',
type: 'warning'
     });
     return;
   }
   if (!this.userInfo.major) {
     this.$message({
message: '请输入你的专业！',
type: 'warning'
     });
     return;
   }
   if (!this.userInfo.number) {
     this.$message({
message: '请输入数量！',
type: 'warning'
     });
     return;
   }
   this.tableData.push(this.userInfo);
   this.userInfo = { 
     name:'',
     position: '',
     major: '',
     number: '',
   };
 },

 //删除
 delUser(idx){
   this.$confirm('确认删除此用户信息？')
     .then(_ => {
this.tableData.splice(idx, 1);
     })
     .catch(_ => {});
 },
 //编辑
 editUser(item,idx){
   this.userIndex = idx;
   this.editObj = {
     name: item.name,
     position: item.position,
     major: item.major,
     number: item.number,
   };
   this.dialogVisible = true;
 },

 handleClose(){
   this.dialogVisible = false;
 },

 confirm(){
   this.dialogVisible = false;
   Vue.set(this.tableData, this.userIndex, this.editObj);
     }
   },
 })

总结：

通过这次练习，让我知道了Element框架是怎么使用的，Element框架写代码做样式的确方便，以后有什么要求低的作业可以拿来使用，目前的我毕竟还是一个学生，我还是需要多锻炼写代码，手写样式的能力。

最后: 附整个项目的源代码，本项目仅供学习交流。

源代码




  
  
  
  
  Vue增删改查
  
    #app{
      width:1024px;
      margin: 0 auto; 
    }
    .add-btn{
      margin-top: 20px;
      width: 100%;
    }
    .body{
      margin-top:20px;
    }
  
  


  
    职位的增删改查
    
      
 
   
 
 
   
 
 
   
 
 
   
 
      
      添加信息
    
    
    
      
    
    
    
      
 
   
   
   
   
 
      
      
 取 消
 确 定

以上就是VUE+Element实现增删改查的示例源码的详细内容，更多关于VUE+Element实现增删改查的资料请关注考高分网其它相关文章！

VUE+Element实现增删改查的示例源码

JavaScript相关栏目本月热门文章