当前位置 主页 > 网站技术 > 代码类 >

    Vue+ElementUI table实现表格分页(2)

    栏目:代码类 时间:2019-12-14 18:06

    三、后端分页(在一的基础上添加分页功能)

    <template>
     <div class="app"> 
       <el-table :data="tableData" >
         <el-table-column prop="date" label="日期" width="180"></el-table-column>
         <el-table-column prop="name" label="姓名" width="180"></el-table-column>
         <el-table-column prop="address" label="地址"></el-table-column>
       </el-table>
        <div class="tabListPage">
          <el-pagination @size-change="handleSizeChange" 
                  @current-change="handleCurrentChange" 
                  :current-page="currentPage" 
                  :page-sizes="pageSizes" 
                  :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper" 
                  :total="totalCount">
           </el-pagination>
        </div>
     </div>
    </template>
    <script>
    export default {
      data(){
        return {
           // 总数据
          tableData:[],
          // 默认显示第几页
          currentPage:1,
          // 总条数,根据接口获取数据长度(注意:这里不能为空)
          totalCount:1,
          // 个数选择器(可修改)
          pageSizes:[1,2,3,4],
          // 默认每页显示的条数(可修改)
          PageSize:1,
        }
      },
     methods:{
         // 将页码,及每页显示的条数以参数传递提交给后台
        getData(n1,n2){
           // 这里使用axios,使用时请提前引入
           axios.post(url,{
              orgCode:1,
              // 每页显示的条数
              PageSize:n1,
              // 显示第几页
              currentPage:n2,
           },{emulateJSON: true},
           {
            headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",} 
            }
            ).then(reponse=>{
              console.log(reponse)
              // 将数据赋值给tableData
              this.tableData=data.data.body
              // 将数据的长度赋值给totalCount
              this.totalCount=data.data.body.length
            }) 
         },
        // 分页
         // 每页显示的条数
        handleSizeChange(val) {
          // 改变每页显示的条数 
          this.PageSize=val
          // 点击每页显示的条数时,显示第一页
          this.getData(val,1)
          // 注意:在改变每页显示的条数时,要将页码显示到第一页
          this.currentPage=1 
        },
         // 显示第几页
        handleCurrentChange(val) {
          // 改变默认的页数
          this.currentPage=val
          // 切换页码时,要获取每页显示的条数
          this.getData(this.PageSize,(val)*(this.pageSize))
        },
      },
      created:function(){
         this.getData(this.PageSize,this.currentPage) 
      }
     }
    </script>

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持IIS7站长之家。