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

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
          },
        }
      })
    }
  }
},

这样就把接口对接过来了。