preface

For a front-end system that often writes to the management side, write paging is a big deal; It is common practice to encapsulate pages and tables in a component, and to render a list of pages by triggering changePage and changeSize paging events when the list is rendered.

But no matter how you wrap it, you always have to write paging events to trigger paging. Is there a way to implement paging logic without writing even paging events? After all, it’s tedious to write about these two events every time;

In my most recent project, I tried another approach to paging, to get rid of paging;

Mixins with

Mixin provides a very flexible way to distribute reusable functionality in Vue components; A mixin object may contain any component option. When a component uses mixin, all mixin options are blended into the component’s own options.

I think there are two things worth noting about the above description from Vue’s official website:

  1. Arbitrary component options: means this intermixed object can define options supported by any Vue object;
  2. All mixin object options are mixed into the component itself: that is, the mixin object can access the component’s data, and the component can access the mixin object’s data, both in the same domain;

These two points are the basis of my attempt;

methods

Let’s first define a mixin. We’ll put the pagination template code in methods. At the same time, edit the paging event and write the execution logic inside the paging event.

export default {
  data () {
    return{ paging: { currentNo: 1, pageSize: 10, }, total: 0, } }, methods: {sizeChange (val) {this.paging. PageSize = logic to be executed after val // paging events this.getList()}, CurrentChange (val) {this.paging. CurrentNo = logic to be executed after val // paging event this.getList()},renderPage () {
      return <el-pagination
        class="m-t-20 m-b-20 t-a-r"
        current-page={this.paging.currentNo}
        on-size-change={this.sizeChange}
        on-current-change={this.currentChange}
        page-sizes={[10, 20, 40, 50]}
        page-size={this.paging.pageSize}
        layout="total, sizes, prev, pager, next, jumper"
        total={this.total} background>
      </el-pagination>
    },
  },
}

Copy the code

Then we can use it in the component! Execute the renderPage event where rendering pages are needed to get them where we want them to be;

import TableList from './components/list'
import pageMixin from '@/components/pageChange/index.js'
export default {
  name: 'test',
  components: {
    TableList,
  },
  mixins: [pageMixin],
  data () {
    return {
      tableData: [],
    }
  },
  mounted() { this.getList() }, methods: { async getList (paging) { const { data } = await https.getList({ ... this.paging }) this.tableData = data this.total = data.totalElements }, },render () {
    return <div class="page">
      <table-list
        table-data={this.tableData}
      />
      {this.renderPage()}
    </div>
  },
}

Copy the code

thinking

This approach is convenient when the page has only one table, but it lacks flexibility. For example, the method name called after a paging event is written dead. If there is more complicated logic, you may need to change the configuration of the mixin object. And this method has only been used in the single table page, has not tried the case of too many tables;

If you have other suggestions or a better and more mature way to write a list page, feel free to leave a comment