用混入的方式写分页-Vue管理端项目分页写法新尝试

前言

对于一个经常写管理端系统的前端来说，写分页是一件绕不过去的事情；一般的做法是将分页与表格封装在一个组件里，在渲染列表时，通过触发changePage和changeSize分页事件来渲染分页列表。

但是无论怎样去封装，总要写分页事件去触发分页，有没有办法就连分页事件也可以不写就直接实现分页的逻辑呢？毕竟每次都要写这两个事件也是很繁琐；

在最近的项目里，我尝试了另一种方法去实现分页效果，从分页中解脱出来；

Mixin 混入

混入提供了一种非常灵活的方式，分发Vue组件中的可复用功能；一个混入对象可能包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混合进入该组件本身的选项。

上述摘自Vue官网的描述，我认为有两点是值得注意的：

任意组件选项：意味这混入对象了可以定义任何Vue对象支持的选项；
所有混入对象选项被混合进入组件本身：就是说混合对象可以访问组件的数据，而组件也可以访问混合对象中的数据，两者在同一个域里；

这两点是我此次尝试的基础；

方法

我们首先来定义一个混入，将分页的template代码写在methods里；同时编辑好分页事件，在分页事件内部写好执行逻辑；

export default {
  data () {
    return {
      paging: {
        currentNo: 1,
        pageSize: 10,
      },
      total: 0,
    }
  },
  methods: {
    sizeChange (val) {
      this.paging.pageSize = val
      // 分页事件后要执行的逻辑
      this.getList()
    },
    currentChange (val) {
      this.paging.currentNo = val
       // 分页事件后要执行的逻辑
      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>
    },
  },
}

然后我们就可以在组件里使用了!在需要渲染分页的地方执行renderPage事件，就可以让分页出现在我们希望的位置；

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>
  },
}

思考

这种方法在页面只有一个表格时很方便，但是缺少了灵活性，比如分页事件后调用的方法名就是写死的，如果有更复杂的逻辑或许就要更改混入对象的配置了；并且该方法也只在单表格页面使用过，还没试过多表格的情况；

如果有小伙伴有其它的建议或者有更好更成熟的写列表页的方法，欢迎留言讨论讨论～