在后台管理系统中表格数据通常来自后端接口。传统开发中每个页面都需要重复编写请求逻辑、处理加载状态、解析返回数据等代码冗余且维护困难。vxe-table 的 proxy-config 代理配置允许你通过简单的配置将表格与数据源绑定让组件自动管理数据加载将你从重复劳动中解放出来。对于没有复杂交互逻辑的通用页面非常好用简单配置一下就能渲染一个页面。列表配置核心配置proxy-config.ajax.query在 vxe-grid 的配置中通过 proxyConfig.ajax.query 指定一个返回 Promise 的函数即可让表格自动请求数据并渲染。proxyConfig:{ajax:{query:(){// 必须返回一个 Promiseresolve 的结果为数组数据returnfetch(/api/list).then(resres.json())}}}代码templatedivvxe-gridv-bindgridOptions/vxe-grid/div/templatescriptsetupimport{reactive}fromvueconstgridOptionsreactive({border:true,height:500,proxyConfig:{// showLoading: false, // 关闭加载中// response: {// list: result // 如果指定接收字段例如 result则接收结果 Promise{ result: any[] }// },ajax:{query:(){// 默认接收 Promiseany[]returnfetch(/api/list).then(resres.json())}}},columns:[{type:seq,width:70},{field:name,title:Name},{field:nickname,title:Nickname},{field:role,title:Role},{field:address,title:Address,showOverflow:true}]})/script分页配置分页查询与列表查询的配置基本一致区别在于需要添加 pagerConfig 分页配置。接口返回的数据结构需包含分页信息总条数。query 方法会接收分页参数page.pageSize、page.currentPage。核心配置proxyConfig:{response:{list:result,// 列表数据字段路径total:page.total// 总条数字段路径},ajax:{query:({page}){// page.pageSize: 每页条数// page.currentPage: 当前页码returnfetch(/api/list?page${page.currentPage}size${page.pageSize}).then(resres.json())}}},pagerConfig:{// 页码配置空对象即可使用默认配置}代码templatedivvxe-gridv-bindgridOptions/vxe-grid/div/templatescriptsetupimport{reactive}fromvueconstgridOptionsreactive({border:true,height:500,pagerConfig:{},proxyConfig:{// showLoading: false, // 关闭加载中// response: {// result: result, // 配置响应结果列表字段// total: page.total // 配置响应结果总页数字段// },ajax:{query:({page}){// 默认接收 Promise{ result: [], page: { total: 100 } }returnfetch(/api/page/${page.pageSize}/${page.currentPage}).then(resres.json())}}},columns:[{type:seq,width:70},{field:name,title:Name},{field:nickname,title:Nickname},{field:role,title:Role},{field:address,title:Address,showOverflow:true}]})/script分页参数传递query 方法接收一个参数对象包含分页信息和搜索条件参数类型说明page.pageSizenumber每页条数由 pagerConfig.pageSize 控制page.currentPagenumber当前页码paramsobject自定义搜索参数可通过 reload(params) 传递响应数据结构映射如果后端返回的数据结构与默认要求不一致可通过 response 配置映射默认要求配置示例列表数据直接为数组{ list: [] }列表数据嵌套在对象中response: { list: ‘data.records’ }总条数嵌套在对象中response: { total: ‘data.total’ }proxyConfig:{response:{list:data.records,// 取 response.data.records 作为列表total:data.total// 取 response.data.total 作为总条数},ajax:{query:()fetch(/api/list).then(resres.json())}}通过 proxy-config.ajax.queryvxe-table 将数据获取与表格渲染解耦只需关注接口定义和列配置表格数据源的管理交给 vxe-table 即可。https://vxetable.cn
