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

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