Vue + Element 项目中结合mixin复用分页器

前端项目中因为频繁用到分页器，如果在页面中频繁去写分页器部分的代码其实很浪费时间，所以有了以下代码

代码一： page.mixin.js

/* 1. 所有查询条件放进form */
/* 2. 查询函数名为searchHandler */
/* 3. 需要一个获取分页数据的getPageData函数*/
/* 4. form为页面用户的其他搜索条件*/

export default {
  data() {
    return {
      pageInfo: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    handleSizeChange(size) {
      this.pageInfo.pageSize = size
      this.__refreshRoute()
      setTimeout(() => {
        this.getPageData()
      }, 0)
    },
    handleCurrentChange(no) {
      this.pageInfo.pageNo = no
      this.__refreshRoute()
      setTimeout(() => {
        this.getPageData(no)
      }, 0)
    },
    __refreshRoute() {
      let query = Object.assign(
        {},
        { pageNo: this.pageInfo.pageNo, pageSize: this.pageInfo.pageSize },
        { form: JSON.stringify(this.form) }
      )
      this.$router.replace({
        name: this.$route.name,
        query
      })
    },
    searchHandler() {
      this.__refreshRoute()
      this.$nextTick(() => {
        this.getPageData()
      })
    }
  }
}

在实际引用中，只需要按需修改引用页面中的getPageData()函数即可，搜索的时候调用searchHandler()

引用页面的部分代码

<el-pagination :total="pageInfo.total"
                :current-page.sync="pageInfo.pageNo"
                :page-sizes="[2, 10, 20, 40, 60, 80,100]"
                :page-size="pageInfo.pageSize"
                prev-text="上一页"
                next-text="下一页"
                layout="total, sizes, prev, pager, next, jumper"
                class="footer"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
</el-pagination>