vue2+ant表格组件抽取（分页+数据展示）

注意处： 当改变表格的页数时，不会触发分页控件进行更新。所以在js中创建tablePageSize，在methods中showSizeChange给tablePageSize赋值，从而触发分页视图更新。

export default {
    //父传子数据
  props:  {
    rowKey: { //表每行id
      type: [String, Function],
      default: 'key'
    },
    total: { //列表总数
      type: Number,
      default: 0
    },
    columns: { //表头
      type: Array,
      default: () => []
    },
    list: { //列表数据
      type: Array,
      default: () => []
    },
    size: { //表格大小
      type: String,
      default: 'middle'
    },
    scroll: { //表格滚动
      type: Object,
      default: () => ({x: true})
    },
    loading: { //表格加载状态
      type: Boolean,
      default: false
    },
    bordered: { //表格是否有边框
      type: Boolean,
      default: true
    },
    havePagination: { //是否分页
      type: Boolean,
      default: true
    },
    pageSize: { //页数
      type: Number,
      default: 10
    },
    pageNum: { //页码
      type: Number,
      default: 1
    },
    defaultExpandAllRows: {//默认展开所有行
      type: Boolean,
      default: false
    },
    haveSelection: { // 是否可以选择
      type: Boolean,
      default: false
    }
  },
  data() {
      formData: null,
      fileId: undefined,
      rangeDate: [],
      time: undefined,
      otherParams: undefined,
      selectedRowKeys: [],
      selectedRows: [],
      tablePageSize: 10
  }，
  methods: {
    // 表格数据选择
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.$emit('onSelectChange',this.selectedRowKeys, this.selectedRows)
    },
    //分页事件
    showSizeChange(current,pageSize) {
      this.tablePageSize = pageSize
      this.$emit('showSizeChange',{
        current: current, 
        pageSize:pageSize
      })
    }
  }，
  render () {
    const _this = this
    //表格的相关参数配置
    const props = {
      rowKey: this.rowKey,
      columns: this.columns,
      scroll: this.scroll,
      loading: this.loading,
      bordered: this.bordered,
      'data-source': this.list,
      defaultExpandAllRows: this.defaultExpandAllRows,
      size: this.size,
      rowSelection: this.haveSelection ? { selectedRowKeys: _this.selectedRowKeys, onChange: _this.onSelectChange } : null,
      pagination: false,
    }
    //是否需要分页，表格的分页有bug，（条件查询时，页码无法重置回第一页）所以只能将分页写在表格外部单独配置
    if(!this.havePagination) {
      props.pagination = false
    }
   //创建表格
    const table = (
      <a-table
        ref="parentTable"
        {...{props,scopedSlots: { ...this.$scopedSlots } }} 
      >
        { Object.keys(this.$slots).map(name => (<template slot={name}>{this.$slots[name]}</template>)) }
      </a-table>
    )
    //渲染页面
    return (
        <div style="position: relative;">
             <div class="table-wrapper m-t-20">
                   { table }
                   //分页写在这里
                   <a-pagination
                      size="small"
                      v-show={ this.havePagination && this.total>0 }
                      total = { this.total } 
                      onchange = { (current, pageSize) => {this.$emit('paginationChange',{current: current, pageSize:pageSize})}}
                      onshowSizeChange={ this.showSizeChange } 
                      show-size-changer
                      current = { this.pageNum } 
                      pageSize = { this.tablePageSize } 
                      show-total={total => `共 ${total} 条`} 
                    />
             </div>
        </div>
    )
  }
}