最近新项目使用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期望的格式相匹配，并且能够正确地获取和返回你所需的数据。
