Vue 实现曾删改查

vue有个很关键的词对增删改查很重要，叫做双向数据绑定。因为你需要不断的传参，传值，接收id，原生DOM的操作能不用就不用，耗性能，还麻烦。以下是个人学习记录，大佬批评指正。

第一：首先来说一说  增，话不多说，上代码。下面为增、删、改页面效果

下面代码是html部分，是一个添加功能，就不上效果图了，v-model绑定的数据为input.xxx

新增自提点

 
     
         
     
     
       
     
     
       
     
   
   
     取 消
     确 定
   

​
 export default {
    data () {
      return {
        input:{
          id:'',
          name:'',
          address:'',
          phone:''
        }
      }
    },
     methods: {
      //新增自提点
      branchAdd(){
        this.$api.branch.add(data => {    //这里为点击按钮调用的接口
          window.location.reload();    //调用成功刷新页面更新数据
        },{
          name:this.input.name,    //传递绑定的参数，注意this指向
          address:this.input.address,
          phone:this.input.phone,
        });
      },
    }
}
 
​
第二：删，这是一个表格，最后为删除，点击删除要根据对应行的id删除此行。点击事件remove(props.row.id)，括号中要传入对应的id值，对应列，所以是props.row.id

 
 
 
 
 
   
 
 
     
   
   
     
   

 methods: {
      //删除
      remove(id){    //括号内要接收上面props.row.id传来的id值
        this.$api.branch.remove(data => {
          window.location.reload();
        },{
          id:id,    //传递对应id给后端，
        });
      },
    }
}
第三：改，修改部分，同样是要获取当前行的id值，点击事件中通过props.row.id（这要根据项目实际情况），这里还有个小问题，就是vue中的点击事件可以用；进行分隔，@click="remove(props.row.id);a();b()"，这里可以一直串联，调用接口不用加（）

 
   

 

 
   
     
   
   
     
   
   
     
   
   
     
   
 
 
    取 消
    确 定
 

data () {
      return {
        input:{
          id:'',
          name:'',
          address:'',
          phone:''
        },
        form:{    //修改页面input里的数据，在这里存储一下
          id:'',
          name:'',
          address:'',
          phone:''
        },
      }
    },
methods: {
      //修改
      //获取id
      selectid(id){    //形参接收id
        this.$api.branch.selectid(data => {
          this.form.id = data.id            //因为需求
          this.form.name = data.name        //要根据id获取当前行的数据，并且渲染到提示框的input中
          this.form.address = data.address  //这里同样是通过双向数据绑定，进行传递数据
          this.form.phone = data.phone
          //window.location.reload();
        },{
          id:id       //传递对应行的id
        });
      },
}
第四：查，下面为搜索功能，效果图如下：其中需要注意参数的转型

 
   
 
 
   
 
 
   
 
 
   

     
   

 
  搜索

methods: {    
      _orderList(){    //此接口与列表接口相同
        this.loading = true;
        this.$api.order.list(data => {
          this.orderList = data;
          this.loading = false;
        },
          {
            orderId:this.search.orderId,                  //传递对应参数给后台
            userId:parseInt(this.search.userId),         //部分参数要注意转类型
            userName:this.search.userName,
            createTime:this.search.createTime,
          }
        );
      },
}
以上就是我所接触的增、删、改、查，希望各位大佬批评指正。
--------------------- 
作者：Dreamer_xr 
来源：CSDN 
原文：https://blog.csdn.net/xr510002594/article/details/81665762 
版权声明：本文为博主原创文章，转载请附上博文链接！