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需要resultlist和totalprops:{//自定义字段读取响应结果,比如返回的结果是:{result:[],page:{total:10}}result:'result',total:'page.total'},那么我们就可以配置vxe-grid的proxyConfig属性了。proxyConfig:{seq:true,//启用动态序号代理,每页序号会根据当前页码变化sort:true,//启用排序代理,点击排序时自动触发查询行为filter:true,//启用过滤器代理,当点击过滤器时,会自动触发查询行为form:true,//启用表单代理,当点击表单提交按钮时,会自动触发重新加载行为ajax:{seq:true,//启用动态序号代理(分页后索引自动计算为当前页的起始序号)query:({page})=>{letparam={limit:page.pageSize,页面:page.currentPage}returnindex(param).then(res=>{console.log(res)return{result:res.data.data,page:{total:res.data.total},}})}}},这样接口就连接好了。
