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

64次阅读

共计 797 个字符,预计需要花费 2 分钟才能阅读完成。

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

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

正文完
 0