vxe-table 配置 ajax 数据源：告别冗余代码，一键渲染表格

在后台管理系统中，表格数据通常来自后端接口。传统开发中，每个页面都需要重复编写请求逻辑、处理加载状态、解析返回数据等，代码冗余且维护困难。vxe-table 的 proxy-config 代理配置，允许你通过简单的配置将表格与数据源绑定，让组件自动管理数据加载，将你从重复劳动中解放出来。

对于没有复杂交互逻辑的通用页面非常好用，简单配置一下就能渲染一个页面。

列表配置

核心配置：proxy-config.ajax.query

在 vxe-grid 的配置中，通过 proxyConfig.ajax.query 指定一个返回 Promise 的函数，即可让表格自动请求数据并渲染。

proxyConfig:{ajax:{query:()=>{// 必须返回一个 Promise，resolve 的结果为数组数据returnfetch('/api/list').then(res=>res.json())}}}

代码

<template><div><vxe-gridv-bind="gridOptions"></vxe-grid></div></template><scriptsetup>import{reactive}from'vue'constgridOptions=reactive({border:true,height:500,proxyConfig:{// showLoading: false, // 关闭加载中// response: {// list: 'result' // 如果指定接收字段，例如 result，则接收结果 Promise<{ result: any[] }>// },ajax:{query:()=>{// 默认接收 Promise<any[]>returnfetch('/api/list').then(res=>res.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(res=>res.json())}}},pagerConfig:{// 页码配置（空对象即可使用默认配置）}

代码

<template><div><vxe-gridv-bind="gridOptions"></vxe-grid></div></template><scriptsetup>import{reactive}from'vue'constgridOptions=reactive({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(res=>res.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 方法接收一个参数对象，包含分页信息和搜索条件：

响应数据结构映射

如果后端返回的数据结构与默认要求不一致，可通过 response 配置映射：

proxyConfig:{response:{list:'data.records',// 取 response.data.records 作为列表total:'data.total'// 取 response.data.total 作为总条数},ajax:{query:()=>fetch('/api/list').then(res=>res.json())}}

通过 proxy-config.ajax.query，vxe-table 将数据获取与表格渲染解耦，只需关注接口定义和列配置，表格数据源的管理交给 vxe-table 即可。

https://vxetable.cn