vxe-table分页无法显示？

Question

vue版本：2.6.10 xe-utils:2.6

html:

  border
  height="300"
  show-header-overflow="tooltip"
  show-overflow="tooltip"
  highlight-hover-row
  :resizable="true"
  :loading="loading"
  :pager-config="tablePage"
  :data="tableData">
  <vxe-table-column type="seq" width="60" title="序号"></vxe-table-column>
  <vxe-table-column field="name" title="订单创建日期" width="120"></vxe-table-column>
  <vxe-table-column field="sex" title="订单号" width="100"></vxe-table-column>
  <vxe-table-column field="sex" title="客户名称" width="100"></vxe-table-column>
  <vxe-table-column field="sex" title="备注" width="100"></vxe-table-column>
  <vxe-table-column field="role" title="操作" width="80" fixed="right">
    <template v-slot="{ row }">
      <vxe-button status="primary" @click="" size="mini">查看</vxe-button>
    </template>
  </vxe-table-column>

</vxe-table>

js:

data() {
  return {
    tableData: [],
    loading: false,
    tablePage: {
      total: 110,
      currentPage: 1,
      pageSize: 10,
      align: 'center',
      pageSizes: [10, 20, 50, 100, 200, 500],
      perfect: true
    }
  }
},
created() {
  this.getListData2()
},
methods: {
  getListData2 () {
    this.loading = true
    getListData().then(res => {
      this.tableData = res.result
      console.log(res.total);
      // this.tablePage.total = res.total
      // console.log(res)
      this.loading = false
    })
  }
}

main.js:

import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
Vue.use(VXETable)

JSON：
`{
  code: 200,
  total: 11,
  result: [
    {name: '张东方闪电三', sex: '男', age: 20},
          {name: '李大范甘迪四', sex: '男', age: 21},
          {name: '王五', sex: '女', age: 22},
          {name: '王五', sex: '女', age: 22},
          {name: '王五', sex: '女', age: 22},
          {name: '王五', sex: '女', age: 22},
          {name: '王五', sex: '女', age: 22},
          {name: '王五', sex: '女', age: 22},
          {name: '王五', sex: '女', age: 22},
          {name: '王五', sex: '女', age: 22}
          
  ]
}`

在线例子：[http://jsrun.net/SQvKp/edit](http://jsrun.net/SQvKp/edit)

Answer 1

要用<vxe-grid> 不能用 <vxe-table> 要吐血了。。。
如果用<vxe-table> 就要在下面加：

<vxe-pager
      :current-page="tablePage.currentPage"
      :page-size="tablePage.pageSize"
      :total="tablePage.totalResult"
      :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
      >
    </vxe-pager>

暂时不知道两个的区别