vue分页

最新推荐文章于 2022-11-06 21:05:50 发布

邓北北_991

最新推荐文章于 2022-11-06 21:05:50 发布

阅读量119

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/w_0217/article/details/119734203

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

vue分页接口

<!-- 表格 -->
      <div class=" mt_10 table_w">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="username" label="Applicant" width="180"></el-table-column>
            <el-table-column prop="phone" label="Telephone Number"></el-table-column>
          </el-table>
      </div>
<!-- 分页 -->
      <div class="block mt_15 flex">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageIndex"
          :page-size="this.pageSize"
          layout=" prev, pager, next,sizes"
          :total="this.total"
          :page-sizes="[1,2,3,5,10,15,20]"
        >
        </el-pagination>

data(){
	return{
		// 表格
      tableData: [  ],
		// 表格分页
      pageIndex:1,    //当前页数pageIndex
      pageSize:2,       //当前页条数pageSize
      total:10,         //总条数
	}
},
mounted(){
    // this.getdata()
    this.getPage()
  },
  methods:{
    // 分页
    getPage(){
        let url = applicantList+'?pageIndex='+this.pageIndex+'&pageSize='+this.pageSize
        get(url).then(res=>{
          // console.log(res.data.data)
          this.tableData = res.data.data
          this.total = res.data.count
          
          // res.data.data.forEach((item)=>{
          //   if(item.audit_status == 0){
          //     item.audit_status = 'To be reviewed'
          //   }else if(item.audit_status == 1){
          //     item.audit_status = 'Passed'
          //   }else{
          //     item.audit_status = 'Rejected'
          //   }
          // })
          
        })
    },
}