vxe-table表格组件的使用已经query函数扩展

htmledit_views">

最近新项目使用html" title=vue>vue3+typescript开发后台管理系统，基本上展示内容一致表格的方式展示，所以使用vxe-table组件来开发，主要是为了方便使用工具栏，以及其他表格操作。

vxe-table

开发文档：https://vxetable.cn/#/table/start/install

全局安装

推荐使用 npm 的方式安装，它能更好地和 webpack、vite 等打包工具配合使用。
依赖库： xe-utils html" title=vue>vue 3.2+（我用的是4.5.21版本，支持html" title=vue>vue3，因此依赖库需要html" title=vue>vue3.2+）

 npm install vxe-table

import { App, createApp } from 'html" title=vue>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）

html"><!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css">
<!-- 引入html" title=vue>vue -->
<script src="https://cdn.jsdelivr.net/npm/html" title=vue>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期望的格式相匹配，并且能够正确地获取和返回你所需的数据。