实现分页的两种形式

第一种：直接在当前页面实现

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="search.pageNum"
  :page-sizes="[ 1, 2, 5, 10 ]"
  :page-size="search.pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total">
</el-pagination>

// 监听每页显示条数变化
handleSizeChange(newSize) {
  this.search.pageSize = newSize;
  this.searchtask();
},
// 监听页码变化
handleCurrentChange(newPage) {
  this.search.pageNum = newPage;
  this.searchtask();
},

   data() {
  return {
    total: 0, // 数据总条数
    // 查询条件
    search: {
      pageNum:1,
      pageSize:10,
      name: '',
      organizationId: '',
    },
  }
},

第二种：实现子父传值实现，方便调用，不用每个页面都写一遍该方法
分页抽离公共组件使用:

新建子组件页面：listPagination.vue

<!-- 分页组件 -->
<template>
  <!--
    background: 背景颜色
    size-change： pageSize 改变时会触发
    current-change：  currentPage 改变时会触发
    current-page：  当前页数，支持 .sync 修饰符
    page-sizes：  每页显示个数选择器的选项设置
    page-size： 每页显示条目个数，支持 .sync 修饰符
    layout： 组件布局，子组件名用逗号分隔
    total  总条目数
  -->
  <div class="list-pagination">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="sizes"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
<!-- cms分页组件 <list-pagination :total="total" :size="size" :sizes="sizes" @change="getPages"></list-pagination>-->
              
<script>
  export default {
    name: "list-pagination",
    props: {
      total: {//总条数
        type: Number,
        default: 0
      },
      sizes: {//每页显示条数数组
        type:Array,
        default: []
      },
      size:{//初始每页显示条数
        type: Number,
        default:0
      },
      current:{//当前页
        type: Number,
        default:1
      }
    },
    data() {
      return {
        pageSize: '',//每页显示条数
        currentPage: ''//当前页
      };
    },
    created() {
      //将页面中初始页面条数赋值给pageSize
      //console.log("当前的size数：" + this.size + "当前页面current:" + this.current);
      this.pageSize = this.size;
      this.currentPage = this.current;
    },
    methods: {
      // 监听每页显示条数变化
      handleSizeChange(val) {
        this.pageSize = val;
        this.$emit("change", this.currentPage, this.pageSize);
      },
      // 监听页码变化
      handleCurrentChange(val) {
        this.currentPage = val;
        this.$emit("change", this.currentPage, this.pageSize);
      }
    }
  }
</script>

<style scoped>

</style>

父组件页面使用：

<list-pagination 
  :total="pageData.total" 
  :size="search.pageSize" 
  :sizes="pageData.sizes" 
  :current="search.pageNum"
  @change="getPages">
</list-pagination>
export default {
 data() {
      return {
        //分页属性值
        pageData: {
          total: 0, // 数据总条数
          sizes:[10,5]//条数显示切换数组
        },    

    // 查询条件
    search: {
      pageNum:1,//当前页面
      pageSize:10,//每页显示条数
      name: '',
      organizationId: '',
    }
  }
},
}

//分页请求查询
getPages(pageNo, pageSize){
  //console.log("当前页：" + pageNo + ",当前条数：" + pageSize);
  //将当前的分页信息赋值给search
  this.search.pageSize = pageSize;
  this.search.pageNum = pageNo;
  //调用党员条件查询方法
  this.searchtask();
},

//条件查询数据
async searchtask() {
  //console.log("当前页1：" + this.search.pageNum + ",当前条数1：" + this.search.pageSize);
  const {data: res} = await this.$http.post('partyManagement/showByName', this.$qs.stringify(this.search));
  // console.log('循环列表数据'+res.data.list);
  this.iconList = res.data.list;
  this.iconList.forEach(element => {
    this.options1.forEach(item => {
      if(element.job === item.code){
        element.jobName = item.name;
      }
    })
  });
  this.pageData.total = res.data.count;
},