vxe-grid 数据代理对接后台接口 vue.js

vxe-grid 是 vxe-table组件库中的高级表格，两者之间的区别在于，vxe-table使用标签式组件，vxe-grid 使用配置式组件。在功能方面两者基本是一样的。
vxe-grid 数据代理的配置，提供的例子都是模拟数据，如果我们有数据接口，那么就需要根据其默认格式配置即可。
比如，我们有一接口，返回是数据格式为：

{ status: 200, data:{ current_page: 1, data: [...], last_page: 8590, per_page: 10, total: 85898 } }

根据提供的例子，可知 vxe-grid 需要结果列表和总数

props: { // 自定义响应结果读取的字段，例如返回结果为：{result: [], page: {total: 10}} result: 'result', total: 'page.total' },

那么，我们可以配置vxe-grid的proxyConfig属性。

proxyConfig: { seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化 sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为 filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为 form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为 ajax: { seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号） query: ({page}) => { let param = { limit: page.pageSize, page: page.currentPage } return index(param).then(res =>{ console.log(res) return { result: res.data.data, page: { total: res.data.total }, } }) } } },

【vxe-grid 数据代理对接后台接口】这样就把接口对接过来了。