最终效果展

     
    
      
      
                   
        
          数据管理
                    
        
         用户列表
                
               
       
                    
                                
                                     
                                 
                                     
                                 
                                     
                                 
                                     
                                 
                                     
                                 
                                
        
             //这是显示总共有多少数据，                    
                
       
    
      
  
     

需要data定义一些，userList定义一个空数组，请求的数据都是存放这里面

data () {      return {                currentPage:1, //初始页                pagesize:10,    //    每页的数据　　　　　　　　　　 　　　　　　　　　 allList: [] 　　　　　　　　} 　　　　 },

对一些数据，方法处理，数据的来源是自己通过json-server搭建的本地数据，通过vue-resource请求数据，

created() {        this.handleallList()    },    methods: {        // 初始页currentPage、初始每页数据数pagesize和数据data        handleSizeChange: function (size) {                this.pagesize = size;                console.log(this.pagesize)  //每页下拉显示数据        },        handleCurrentChange: function(currentPage){                this.currentPage = currentPage;                console.log(this.currentPage)  //点击第几页        },        handleUserList() {            this.$http.get('http://localhost:3000/userList').then(res => {  //这是从本地请求的数据接口，                this.allList = res.body            })        }    }