vue配合Axios的增删改查demo

 分页：

 <pagination @getList="getPages" :count="count"></pagination> 
 
 
 import Pagination from "@/components/common/pagination"; 
 
 
     filters: { 
        search: "", 
        searchFields: "groupName", 
        page: 1, 
        pageSize: 10, 
      }, 
      count: 0,  
 
 
 components: { 
    Pagination, 
  }, 
 
 
getList() { 
      this.$request(this.$api.groupList, this.filters, "GET") 
        .then((res) => { 
          console.log(res); 
          if (res.data.code == 200) { 
            this.count=res.data.data.total; 
            this.listData.rows = res.data.data.rows; 
          } else { 
            console.log("获取失败"); 
          } 
        }) 
    },   
    getPages(obj) { 
      if (obj.mode === "pageSize") { 
        this.filters.pageSize = obj.pageSize; 
      } else { 
        this.filters.page = obj.currentPage; 
      } 
      this.getList(); 
    }, 

GET方法

getGroupData(){ 
   let filter = { 
       page: 1, 
       pageSize: 10, 
   }; 
   this.$request(this.$api.groupList, filter, "GET") 
     .then((res) => { 
       console.log(res); 
       if (res.data.code == 200) { 
         this.$refs.groupTable1.listData=res.data.data; 
       } else { 
         console.log("获取失败"); 
       } 
     }) 
     .catch((e) => { 
       this.$message.error(e); 
     }); 
 }, 

 POST方法

getGroupData(){ 
   let filter = { 
       page: 1, 
       pageSize: 10, 
   }; 
   this.$request(this.$api.groupAdd, filter, "POST") 
     .then((res) => { 
       console.log(res); 
       if (res.data.code == 200) { 
         this.$refs.groupTable1.listData=res.data.data; 
         this.$refs.groupTable1.count=res.data.data.total; 
       } else { 
         console.log("获取失败"); 
       } 
     }) 
     .catch((e) => { 
       this.$message.error(e); 
     }); 
 }, 

DELETE方法

getGroupData(){ 
   let filter = { 
       page: 1, 
       pageSize: 10, 
   }; 
   this.$request(this.$api.groupList, filter, "DELETE") 
     .then((res) => { 
       console.log(res); 
       if (res.data.code == 200) { 
         this.$refs.groupTable1.listData=res.data.data; 
         this.$refs.groupTable1.count=res.data.data.total; 
       } else { 
         console.log("获取失败"); 
       } 
     }) 
     .catch((e) => { 
       this.$message.error(e); 
     }); 
 },