vben admin表格常用配置

1.表格列属性

复制代码

/**
 * 定义表格列的配置
 * @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, // 列宽度
    },
  ];
}

sortable 可排序
showOverflow 超出显示省略号
fixed 固定在左侧
width 列宽度 auto
type 渲染类型
formatter 格式化内容
editRender 单元格编辑渲染配置项

2.表格配置

html 复制代码

// 表格本身的配置选项
  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>,

toolbarConfig 工具栏配置

html 复制代码

<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>

行拖拽配置

html 复制代码

//表格列中添加
    {
      dragSort: true,
      title: '行拖拽',
      width: 60,
    },
//表格配置中行配置添加
    // 行配置，指定每行数据的唯一标识字段为 id
    rowConfig: {
      keyField: 'id',
      drag: true, // 允许拖拽排序
    },

行编辑配置

html 复制代码

    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);
    },

导出功能配置

html 复制代码

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

      message: true,
      useStyle: false,
}

框架全量导出数据为空，可以自定义导出按钮实现

html 复制代码

// 导出所有数据
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>自定义导出实现

全量数据导出，数据量特别大的情况使用这种方式前端会卡住，可以在后端进行导出操作直接在后端生成文件导出