关于表格组件的分页使用问题

[ChrisLo0751]

操作步骤：

首先，我为表格组件绑定了一个fetchData方法，由下图可得，已经关联该方法：

那么，接下来就是编写fetchData的方法内容了。我参考tiny-vue的写法进行编写，通过Promise.reslove包装成功的内容返回

function fetchData({ page }) {
  const result = [
    {
      id: '1',
      name: 'GFD科技有限公司',
      city: '福州',
      employees: 800,
      created_date: '2014-04-30 00: 56: 00',
      boole: false
    },

    {
      id: '2',
      name: 'WWW科技有限公司',
      city: '深圳',
      employees: 300,
      created_date: '2016-07-08 12: 36: 22',
      boole: true
    },

    {
      id: '3',
      name: 'WWW科技有限公司',
      city: '深圳',
      employees: 300,
      created_date: '2016-07-08 12: 36: 22',
      boole: true
    },

    {
      id: '4',
      name: 'WWW科技有限公司',
      city: '深圳',
      employees: 300,
      created_date: '2016-07-08 12: 36: 22',
      boole: true
    },

    {
      id: '5',
      name: 'WWW科技有限公司',
      city: '深圳',
      employees: 300,
      created_date: '2016-07-08 12: 36: 22',
      boole: true
    },

    {
      id: '6',
      name: 'WKK科技有限公司',
      city: '北京',
      employees: 300,
      created_date: '2016-07-08 12: 36: 22',
      boole: true
    }
  ]

  const { currentPage, pageSize } = page
  const offset = (currentPage - 1) * pageSize

  return Promise.resolve({
    result: result.slice(offset, offset + pageSize),
    page: { total: result.length }
  })
}

打开预览，控制台报错，提示page 为 undefined：

[ghost]

fetchData返回分页参数需要配置pager属性

interface IPagerConfig {
  component?: VueComponent
  attrs: {
    currentPage: number
    pageSize: number
    pageSizes: number[]
    total: number
    // 分页组件布局默认值：'total, prev, pager, next, jumper, sizes'
    layout: string
  }
}

[ChrisLo0751]

这是我的pager 配置

{
  attrs: {
    currentPage: 1,
    pageSize: 5,
    pageSizes: [5,10],
    total: 0,
    layout: 'total, prev, pager, next, jumper, sizes'
  }
}

请问配置有问题吗

[ghost]

没有问题

[ghost]

一般分页参数会绑定到各个变量上，提供两种方案的示例供参考：

1. 变量绑定，输入表达式
   

2. 修改变量，定义getter
   

[ChrisLo0751]

感谢，问题已解决