/**
 * 定義表格列的配置
 * @param onActionClick 操作列點擊回調函數
 * @param onStatusChange 狀態改變回調函數
 * @returns 表格列配置數組
 */
export function useColumns(): VxeTableGridOptions['columns'] {
  return [
    {
      field: 'id', // 字段名
      title: $t('system.tabletest.id'), // 列標題（ID）
      // width: 250, // 列寬度
      sortable: true, // 可排序
      showOverflow: true, // 超出顯示省略號
      fixed: 'left', // 固定在左側
    },
    {
      field: 'gsId', // 字段名
      title: $t('gsId'),
      // width: 200, // 列寬度
    },
    {
      field: 'code', // 字段名
      title: $t('system.tabletest.code'),
      // width: 200, // 列寬度
    },
    {
      field: 'name', // 字段名
      title: $t('system.tabletest.name'),
      // width: 200, // 列寬度
    },
    {
      field: 'status', // 字段名
      title: $t('system.role.status'), // 列標題（狀態）
      // width: 100, // 列寬度
    },
    {
      align: 'center', // 居中對齊

      field: 'operation', // 字段名
      fixed: 'right', // 固定在右側
      title: $t('system.role.operation'), // 列標題（操作）
      // width: 130, // 列寬度
    },
  ];
}

// 表格本身的配置選項
  gridOptions: {
    // 使用 useColumns 函數定義表格列傳入兩個回調函數：onActionClick（操作列點擊）和 onStatusChange（狀態改變）
    columns: useColumns(),
    // 表格高度自適應
    height: 'auto',
    // 保留原生數據，即使刷新頁面也不會丟失已編輯的數據
    keepSource: true,
    // 導出功能配置
    exportConfig: {},
    // 代理配置，用於處理數據請求
    proxyConfig: {
      // AJAX 請求配置
      ajax: {
        // page 包含分頁信息，formValues 是表單查詢條件
        query: async ({ page }, formValues) => {
          // 調用 getRoleList API 獲取角色列表數據
          const result = await getTableTestList({
            page: page.currentPage,
            pageSize: page.pageSize,
            ...formValues,
          });
          return result;
        },
      },
    },
    // 行配置，指定每行數據的唯一標識字段為 id
    rowConfig: {
      keyField: 'id',
    },

    // 工具欄配置
    toolbarConfig: {
      custom: true, // 自定義列
      export: true, // 導出數據
      refresh: true, // 刷新數據
      search: true, // 搜索功能
      zoom: true, // 全屏縮放
      print: true, // 打印
    },
    // 使用類型斷言指定配置的類型SystemRoleApi.SystemRole 是數據的類型定義
  } as VxeTableGridOptions<TableTestApi.TableTest>,

<template>
  <Page auto-content-height>
    <FormDrawer />
    <Grid table-title="測試表格">
      <template #toolbar-tools>
        <a-button type="primary"> 左側按鈕 </a-button>
      </template>

      <template #toolbar-actions>
        <a-button type="primary"> 右側按鈕 </a-button>
      </template>
    </Grid>
  </Page>
</template>

//表格列中添加
    {
      dragSort: true,
      title: '行拖拽',
      width: 60,
    },
//表格配置中行配置添加
    // 行配置，指定每行數據的唯一標識字段為 id
    rowConfig: {
      keyField: 'id',
      drag: true, // 允許拖拽排序
    },

editConfig: {
      mode: 'row',
      trigger: 'click',
    },

    onEditClosed: ({
      row,
      column,
    }: {
      column: any;
      row: BreakStockManagementApi.BreakStockManagement;
    }) => {
      // 設置默認值
      if (column.field === 'reasonType' && row.reasonType === '') {
        // message.info(
        //   `編輯結束 - 字段: ${column.field}, 值: ${row[column.field]}`,
        // );
        row.reasonType = 1;
      }
      // console.log(`編輯結束 - 字段: ${column.field}, 值: ${row[column.field]}`);
      updateBreakStockManagement(row);
    },

exportConfig: {
      types: ['xlsx', 'csv'], // 導出類型
      filename: 'data', // 默認文件名
      mode: 'current', // 導出模式
      modes: ['current', 'selected'],
      download: true,

      message: true,
      useStyle: false,
}

// 導出所有數據
async function onExportAll() {
  message.success('正在導出所有數據');
  try {
    // 首先獲取所有數據
    const form = await gridApi.formApi.getValues();

 
    // 調用API獲取所有數據（不分頁）
    const result = await getBreakStockManagementList({
      ...form,
      page: 1,
      pageSize: 999_999, // 設置一個足夠大的數字來獲取所有數據
    });

 
    if (result.total === 0) {
      message.warning('沒有數據可以導出');
      return;
    }

 
    // 使用獲取到的所有數據進行導出
    gridApi.grid.exportData({
      data: result.items || result.records || result,
      type: 'xlsx',
      filename: 'data',
      sheetName: 'data',
      isHeader: true,
      isColgroup: true,
    });
  } catch (error) {
    message.error(`導出失敗: ${(error as Error).message}`);
  }
}    <template #toolbar-tools>
        <button class="btn btn-primary" @click="onExportAll">全量導出</button>
      </template>自定義導出實現