vue实现table分页以及用户手动筛选

vue实现table分页以及用户手动筛选

话不多说上预览图

由于没有与后端对接,所以这块的数据为假数据

功能点:用户可以对状态进行筛选

分页部分:

<!--        分页组件-->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryInfo.currentPage"
                        :page-sizes="[10, 20, 30, 50, 100]"
                        :page-size="queryInfo.pageSize"
                        layout="total, sizes, prev, next, jumper"
                        prev-text="上一页"
                        next-text="下一页"
                        :total="total">
                </el-pagination>

先写好分页组件

getTableData(){
   
        let data = {
   
          offset: this.queryInfo.currentPage,
          size: this.queryInfo.size
        }
        console.log("offset为" + data.offset)
        this.$http.get("/membership/deposit/list",{
   params: data}).then(res=>{
   
          if(res.data.state){
   
            console.log(res.data.msg);
            this.tableData=res.data.data.list
              this.total = res.data.data.total
          }else{
   
            this.$message.error(res.data.msg)
          }
        })
      },

从后端获取table数据的方法

getTableDataOne(){
   
			let data = {
   
				offset: this.queryInfo.currentPage,
				size: this.queryInfo.size,
				status: this.status
			}
			console.log("offset为" + data.offset)
			this.$http.get("/membership/deposit/list",{
   params: data}).then(res=>{
   
				if(res.data.state){
   
					console.log(res.data.msg);
					this.tableData=res.data.data.list
					this.total = res.data.data.total
				}else{
   
					this.$message.error(res.data.msg)
				}
			})
		},

通过筛选条件(status)从后端获取数据的方法

handleSizeChange (newSize) {
   
        console.log(`每页 ${
   newSize} 条`)
        this.queryInfo.size = newSize
        //size改变时currentPage应该为1
        this.queryInfo.currentPage = 1
		  if(this.flag === 1){
   
			  this.getTableData()
		  }else{
   
			  this.getTableDataOne()
		  }
      },

监听size改变的事件
通过flag来判断用户是否进行了筛选,如果在筛选状态调用getTableDataOne()方法来获取table数据,反之则调用getTableData()方法来获取table数据

handleCurrentChange (newPage) {
   
        console.log(`当前页: ${
   newPage}`)
        this.queryInfo.currentPage = newPage
		  if(this.flag === 1){
   
			  this.getTableData()
		  }else{
   
			  this.getTableDataOne()
		  }
      },

监听页码值改变的事件

筛选部分

		    <el-table-column
                    label="状态"
                    prop="status"