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

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

列表配置

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

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

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

代码

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

// 模拟接口
const findList = () => {
  console.log('调用查询接口')
  return new Promise((resolve) => {
    setTimeout(() => {
      const list = [
        { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
        { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'test abc' },
        { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
        { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women', age: 21, address: 'Shenzhen' },
        { id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man', age: 29, address: 'Shenzhen' },
        { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man', age: 35, address: 'test abc' },
        { id: 10009, name: 'Test9', nickname: 'T9', role: 'Develop', sex: 'Man', age: 35, address: 'Shenzhen' },
        { id: 100010, name: 'Test10', nickname: 'T10', role: 'Develop', sex: 'Man', age: 35, address: 'Guangzhou' }
      ]
      resolve(list)
    }, 300)
  })
}
const gridOptions = reactive({
  border: true,
  height: 500,
  proxyConfig: {
    // showLoading: false, // 关闭加载中
    // response: {
    //   list: 'result' // 如果指定接收字段，例如 result，则接收结果 Promise<{ result: any[] }>
    // },
    ajax: {
      query: () => {
        // 默认接收 Promise<any[]>
        return findList()
      }
    }
  },
  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: 当前页码
      return fetch(`/api/list?page=${page.currentPage}&size=${page.pageSize}`)
        .then(res => res.json())
    }
  }
},
pagerConfig: {
  // 页码配置（空对象即可使用默认配置）
}

代码

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
const list = [
  { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
  { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
  { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
  { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'test abc' },
  { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
  { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women', age: 21, address: 'Shenzhen' },
  { id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man', age: 29, address: 'Shenzhen' },
  { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man', age: 35, address: 'test abc' },
  { id: 10009, name: 'Test9', nickname: 'T9', role: 'Develop', sex: 'Man', age: 35, address: 'Shenzhen' },
  { id: 100010, name: 'Test10', nickname: 'T10', role: 'Develop', sex: 'Man', age: 35, address: 'Guangzhou' },
  { id: 100011, name: 'Test11', nickname: 'T11', role: 'Develop', sex: 'Man', age: 49, address: 'Guangzhou' },
  { id: 100012, name: 'Test12', nickname: 'T12', role: 'Develop', sex: 'Women', age: 45, address: 'Shanghai' },
  { id: 100013, name: 'Test13', nickname: 'T13', role: 'Test', sex: 'Women', age: 35, address: 'Guangzhou' },
  { id: 100014, name: 'Test14', nickname: 'T14', role: 'Test', sex: 'Man', age: 29, address: 'Shanghai' },
  { id: 100015, name: 'Test15', nickname: 'T15', role: 'Develop', sex: 'Man', age: 39, address: 'Guangzhou' },
  { id: 100016, name: 'Test16', nickname: 'T16', role: 'Test', sex: 'Women', age: 35, address: 'Guangzhou' },
  { id: 100017, name: 'Test17', nickname: 'T17', role: 'Test', sex: 'Man', age: 39, address: 'Shanghai' },
  { id: 100018, name: 'Test18', nickname: 'T18', role: 'Develop', sex: 'Man', age: 44, address: 'Guangzhou' },
  { id: 100019, name: 'Test19', nickname: 'T19', role: 'Develop', sex: 'Man', age: 39, address: 'Guangzhou' },
  { id: 100020, name: 'Test20', nickname: 'T20', role: 'Test', sex: 'Women', age: 35, address: 'Guangzhou' },
  { id: 100021, name: 'Test21', nickname: 'T21', role: 'Test', sex: 'Man', age: 39, address: 'Shanghai' },
  { id: 100022, name: 'Test22', nickname: 'T22', role: 'Develop', sex: 'Man', age: 44, address: 'Guangzhou' }
]

// 模拟接口
const findPageList = (pageSize, currentPage) => {
  console.log(`调用查询接口 pageSize=${pageSize} currentPage=${currentPage}`)
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        result: list.slice((currentPage - 1) * pageSize, currentPage * pageSize),
        page: {
          total: list.length
        }
      })
    }, 100)
  })
}

const gridOptions = reactive({
  border: true,
  height: 500,
  pagerConfig: {},
  proxyConfig: {
    // showLoading: false, // 关闭加载中
    // response: {
    //   result: 'result', // 配置响应结果列表字段
    //   total: 'page.total' // 配置响应结果总页数字段
    // },
    ajax: {
      query: ({ page }) => {
        // 默认接收 Promise<{ result: [], page: { total: 100 } }>
        return findPageList(page.pageSize, page.currentPage)
      }
    }
  },
  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.pageSize	number	每页条数（由 pagerConfig.pageSize 控制）
page.currentPage	number	当前页码
params	object	自定义搜索参数（可通过 reload(params) 传递）

响应数据结构映射

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

默认要求	配置示例
列表数据直接为数组
列表数据嵌套在对象中	response:
总条数嵌套在对象中	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

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

文章版权声明 1、本网站名称：拾光赋
2、本站永久网址：https://www.blogs.ink
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ：805375623进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

Vue
# vue