elementUI 分页组件

在components下新建分页组件 PaginationChange

<template>
  <el-pagination
    v-if="pageData.total"
    background
    :current-page="pageData.pageNo"
    :page-size="pageData.pageSize"
    :total="pageData.total"
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script>
export default {
  name: "Pagination",
  props: {
    pageData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  methods: {
    // 分页当前页信息
    handleCurrentChange(data) {
      this.$emit("currentPage", data);
    },
    handleSizeChange(data) {
      this.$emit("sizeChange", data);
    },
  },
};
</script>

<style scoped>
.el-pagination {
  text-align: right;
  padding: 20px;
}
</style>

在应用的页面中使用

Html

 

<template>
    <el-button
       size="mini"
       type="primary"
       class="right"
       @click="inquire(1, 10)"
     >查询</el-button>
    <div style="text-align:right;margin-top:10px">
       <Pagination
          :page-data="pageData"
          @currentPage="currentPage"
          @sizeChange="sizeChange"
        />
     </div>
</template>

js

<script>
  import Pagination from "@/components/PaginationChange"; // 引入分页
  export default {
    components:{
      Pagination
    },
    data(){
      return{
        pageData: {
          total: 1000,
          pageNo: 1,
          pageSize: 10,
        }, // 分页
      }
    },
    methods:{
      //查询
    inquire(curPage){
      const params = Object.assign(this.form, {
        pageNo: typeof curPage === "number" ? curPage : 1,
        pageSize: this.pageData.pageSize,
      });
      // console.log(params);
     // 查询接口(params).then(res => {
        // console.log(res);
        //this.tableData = res.body.list
        //this.pageData.total = res.body.total
      //})
    },
      // 分页
      currentPage(data) {
        this.pageData.pageNo = data;
        this.inquire(data); // 查询接口
      },
      sizeChange(data) {
        this.pageData.pageNo = 1;
        this.pageData.pageSize = data;
        this.inquire(data);
      },
    }
  } 
</script>