最近新项目使用vue3+typescript开发后台管理系统，基本上展示内容一致表格的方式展示，所以使用vxe-table组件来开发，主要是为了方便使用工具栏，以及其他表格操作。
vxe-table
开发文档：https://vxetable.cn/#/table/start/install
全局安装
推荐使用 npm 的方式安装，它能更好地和 webpack、vite 等打包工具配合使用。
依赖库： xe-utils vue 3.2+（我用的是4.5.21版本，支持vue3，因此依赖库需要vue3.2+）
npm install vxe-tableimport { App, createApp } from 'vue'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'function useTable (app: App) {app.use(VXETable)
}createApp(App).use(useTable).mount('#app')CDN
可以通过 unpkg 或 cdnjs 获取到最新版本的资源，并在页面上引入即可
（注：不建议将不受信任的CDN地址用于生产，因为该连接随时都可能会失效，导致项目挂掉，使用CDN方式记得锁定版本号，锁定版本的方法请查看 unpkg.com）
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css">
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 引入组件 -->
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script><script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>注意：按需安装、快速入门、全局参数等，详见开发文档
query函数的使用
官方只展示了通过fetch来请求，所以想要扩展使用其他方法请求数据
vxe-table 是一个 Vue 的表格组件库，它提供了丰富的功能和自定义选项。query 函数是你为 vxe-table 组件定义的一个方法，用于构建和发送数据请求。这个函数的具体写法取决于你的应用需求和数据API的结构。
关于 query 函数的写法，并没有固定的模式或数量限制。你可以根据你的应用逻辑和数据API的要求来编写这个函数。以下是一些可能的 query 函数示例，它们展示了不同的处理逻辑和API调用方式：
示例 1: 基本的查询函数
query: ({ page, sorts, filters, form }) => { const queryParams = { ...form, page: page.currentPage, size: page.pageSize, ...sorts.reduce((obj, sort, index) => ({ ...obj, [`sortField${index + 1}`]: sort.field, [`sortOrder${index + 1}`]: sort.order }), ...filters.reduce((obj, filter) => ({ ...obj, [filter.field]: filter.values.join(',') }), }; return fetch(`${serveApiUrl}/api/pub/page/list`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(queryParams) }).then(response => response.json());
}示例 2: 使用 axios 的查询函数
import axios from 'axios'; query: ({ page, sorts, filters, form }) => { const queryParams = { ...form, pageNum: page.currentPage, pageSize: page.pageSize, orderBy: sorts.map(sort => `${sort.field} ${sort.order}`).join(','), ...filters.reduce((obj, filter) => ({ ...obj, [filter.field]: filter.values.join(',') }), }; return axios.post(`${serveApiUrl}/api/pub/page/list`, queryParams) .then(response => response.data);
}示例 3: 复杂的查询逻辑
query: ({ page, sorts, filters, form }) => { const queryParams = { ...form, pageIndex: page.currentPage - 1, // 假设API从0开始计数 pageSize: page.pageSize, }; // 处理排序条件，假设API接受排序字段和排序方向的数组 if (sorts.length > 0) { queryParams.orderBy = sorts.map(sort => ({ field: sort.field, order: sort.order })); } // 处理筛选条件，假设API接受筛选字段和值的对象数组 if (filters.length > 0) { queryParams.filter = filters.map(filter => ({ field: filter.field, operator: 'IN', // 假设所有筛选条件使用IN运算符 value: filter.values })); } return fetch(`${serveApiUrl}/api/pub/page/list`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(queryParams) }).then(response => response.json());
} 每个示例都展示了不同的查询参数构建方式和API调用方法。你可以根据你的API要求和业务逻辑来编写自己的 query 函数。记住，最重要的是确保你的查询参数与API期望的格式相匹配，并且能够正确地获取和返回你所需的数据。
