vxe-table vxe-grid proxy pager 数据代理分页、自定义分页、自定义返回数据结构

vxe-grid 是一套集成完整功能的数据表格，接下来使用其他一个数据代理功能来完成列表查询。
上线配置 proxy-config，props 属性用于自定义返回的数据字段，ajax 用于配置请求接口

首页 grid 在读取完配置信息后，默认会触发 ajax.query 动作去请求数据，必须返回一个 Promise，数据结构可以自行定义

<vxe-grid
  border
  resizable
  pager-config
  ref="xGrid"
  height="500"
  :proxy-config="tableProxy"
  :columns="tableColumn">
</vxe-grid>

export default {
 data () {
   return {
     tableProxy: {
        // seq: true, // 启用动态序号代理，如果每页的序号需要自动递增时设置为 true
        props: {
          result: 'result', // 设置后台返回数据所对应的字段名
          total: 'page.totle' // 设置后台返回总条数所对应的字段名
        },
        ajax: {
          // 任何支持 Promise API 的库都可以对接（fetch、jquery、axios、xe-ajax）
          query: this.getData
        }
      },
     tableColumn: [
       { type: 'seq', width: 60 },
       { type: 'checkbox', width: 50 },
       { field: 'name', title: 'Name' },
       { field: 'nickname', title: 'Nickname' },
       { field: 'role', title: 'Role' },
       { field: 'describe', title: 'Describe', showOverflow: true }
     ]
   }
 },
 methods: {
   getData(params) {
     return new Promise(resolve => {
     	setTimeout(() => {
	      	const list = [
		      	{name: 'test_124',sex: '男', age: 32},
		      	{name: 'test_190',sex: '女', age: 22},
		      	{name: 'name_66',sex: '男', age: 26},
		      	{name: 'name_77',sex: '男', age: 28},
		      	{name: 'name_17',sex: '女', age: 23}
	      	]
	      	resolve({
	      		result: list,
	      		page: { totle: 500 }
	      	})
	    }, 200)
     })
   }
 }
}

如果想要通过按钮手动触发查询动作，可以通过提交指令

this.$refs.xGrid.commitProxy('query') // 触发查询 ajax.query
this.$refs.xGrid.commitProxy('reload') // 触发查询 ajax.query，并清除表格所有状态，回到第一页