关于vue.js:vxegrid-数据代理-对接-后台接口

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

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