Vben admin创建表格

1.创建表格

创建ts文件

TypeScript 复制代码

// 引入必要的 VxeTable 类型
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';

// 引入国际化功能
import { $t } from '#/locales';

/**
 * 定义表格查询表单的结构配置
 * 用于表格上方的查询条件表单
 */
export function useGridFormSchema(): VbenFormSchema[] {
  return [
    {
      component: 'Input', // 使用输入框组件
      fieldName: 'name', // 字段名
      label: $t('system.tabletest.name'), // 角色名称查询条件
    },
    {
      component: 'Input',
      fieldName: 'id', // ID查询条件
      label: $t('system.tabletest.id'),
    },
    {
      component: 'Select', // 使用下拉选择组件
      componentProps: {
        allowClear: true, // 允许清除选择
        options: [
          // 下拉选项
          { label: $t('common.enabled'), value: 1 }, // 启用
          { label: $t('common.disabled'), value: 0 }, // 禁用
        ],
      },
      fieldName: 'status', // 状态查询条件
      label: $t('system.role.status'),
    },
  ];
}

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

创建vue文件

html 复制代码

<script lang="ts" setup>
// 这是一个自定义的 TypeScript 类型通常用于表示一个可以接受任意字符串键的对象类型

// import type TypeScript 的类型导入语法仅导入类型信息，不导入实际的值编译后会被完全移除，不影响运行时
// OnActionClickParams表格操作事件参数类型   VxeTableGridOptions: 表格配置参数类型
// #/adapter/vxe-table 这是一个适配器文件，用于配置和封装 vxe-table 组件
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
// SystemRoleApi:系统角色相关的 API 类型定义
// 通常包含与系统角色管理相关的数据接口和类型
// 在你的项目中代表系统角色的数据结构类型
import type { TableTestApi } from '#/api';

// Page:一个页面布局组件 useVbenDrawer:一个自定义的 Vue Composition API Hook
import { Page } from '@vben/common-ui';

// 消息提示组件
// useVbenVxeGrid专门用于创建和管理 vxe-table 表格组件
import { useVbenVxeGrid } from '#/adapter/vxe-table';
// 导入国际化功能
// 导入相关的 API
import { getTableTestList } from '#/api';

// 导入表格列配置和表单配置
import { useColumns, useGridFormSchema } from './data';

// useVbenVxeGrid Hook 创建一个功能完整的数据表格组件。
// 返回两个值：Grid（表格组件）和 gridApi（控制表格的API）
const [Grid, gridApi] = useVbenVxeGrid({
  // 配置与表格关联的查询表单选项
  formOptions: {
    // 将 createTime 字段映射到表单中的 startTime 和 endTime 两个字段
    fieldMappingTime: [['createTime', ['startTime', 'endTime']]],
    // 使用 useGridFormSchema() 函数提供的表单结构定义查询表单包含哪些输入项（如输入框、下拉框等
    schema: useGridFormSchema(),
    // 表单内容改变时自动提交查询
    submitOnChange: true,
    // 配置表单一行显示四列
    wrapperClass: 'grid-cols-4',
  },
  // 表格本身的配置选项
  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>,
});
</script>

<template>
  <Page auto-content-height>
    <FormDrawer />
    <Grid table-title="测试表格">
      <template #toolbar-tools> </template>
    </Grid>
  </Page>
</template>

2.模拟数据

mock数据方式一

模拟数据二（简单）

TypeScript 复制代码

 proxyConfig: {
      ajax: {
        query: async ({ page }) => {
          // 模拟分页逻辑
          const pageSize = page.pageSize || 10;
          const currentPage = page.currentPage || 1;
          const data = mockData[] || [];

          // 模拟分页结果
          const start = (currentPage - 1) * pageSize;
          const end = start + pageSize;
          const paginatedData = data.slice(start, end);

          return {
            total: data.length,
            records: paginatedData,
          };
        },
}