From c116b9ddafd4f50085477e6c67b1be8ae8a3a423 Mon Sep 17 00:00:00 2001
From: cshaptx4869 <994774638@qq.com>
Date: Wed, 11 Jun 2025 15:26:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20=E9=9B=86=E6=88=90VxeTable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mock/menu.mock.ts                  |  13 +
 package.json                       |   3 +-
 src/main.ts                        |   1 +
 src/plugins/index.ts               |   3 +
 src/plugins/vxeTable.ts            |  70 ++++
 src/styles/index.scss              |   3 +
 src/styles/vxe-table.css           |  92 +++++
 src/styles/vxe-table.scss          |  39 ++
 src/views/demo/vxe-table/index.vue | 632 +++++++++++++++++++++++++++++
 9 files changed, 855 insertions(+), 1 deletion(-)
 create mode 100644 src/plugins/vxeTable.ts
 create mode 100644 src/styles/vxe-table.css
 create mode 100644 src/styles/vxe-table.scss
 create mode 100644 src/views/demo/vxe-table/index.vue

diff --git a/mock/menu.mock.ts b/mock/menu.mock.ts
index 02d72db0..6d7b8495 100644
--- a/mock/menu.mock.ts
+++ b/mock/menu.mock.ts
@@ -472,6 +472,19 @@ export default defineMock([
             params: null,
           },
           children: [
+            {
+              path: "vxe-table",
+              component: "demo/vxe-table/index",
+              name: "VxeTable",
+              meta: {
+                title: "VxeTable",
+                icon: "el-icon-MagicStick",
+                hidden: false,
+                keepAlive: true,
+                alwaysShow: false,
+                params: null,
+              },
+            },
             {
               path: "icon-demo",
               component: "demo/icons",
diff --git a/package.json b/package.json
index eff8195a..3ffa2a77 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,8 @@
     "vue": "^3.5.16",
     "vue-draggable-plus": "^0.6.0",
     "vue-i18n": "^11.1.5",
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.5.1",
+    "vxe-table": "~4.6.25"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.8.1",
diff --git a/src/main.ts b/src/main.ts
index 38b64409..74fe30d9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,6 +4,7 @@ import setupPlugins from "@/plugins";
 
 // 暗黑主题样式
 import "element-plus/theme-chalk/dark/css-vars.css";
+import "vxe-table/lib/style.css";
 // 暗黑模式自定义变量
 import "@/styles/dark/css-vars.css";
 import "@/styles/index.scss";
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
index 98d26205..99077563 100644
--- a/src/plugins/index.ts
+++ b/src/plugins/index.ts
@@ -8,6 +8,7 @@ import { setupElIcons } from "./icons";
 import { setupPermission } from "./permission";
 import { setupWebSocket } from "./websocket";
 import { InstallCodeMirror } from "codemirror-editor-vue3";
+import { setupVxeTable } from "./vxeTable";
 
 export default {
   install(app: App<Element>) {
@@ -25,6 +26,8 @@ export default {
     setupPermission();
     // WebSocket服务
     setupWebSocket();
+    // vxe-table
+    setupVxeTable(app);
     // 注册 CodeMirror
     app.use(InstallCodeMirror);
   },
diff --git a/src/plugins/vxeTable.ts b/src/plugins/vxeTable.ts
new file mode 100644
index 00000000..5826fafb
--- /dev/null
+++ b/src/plugins/vxeTable.ts
@@ -0,0 +1,70 @@
+import type { App } from "vue";
+import VXETable from "vxe-table"; // https://vxetable.cn/v4.6/#/table/start/install
+
+// 全局默认参数
+VXETable.setConfig({
+  // 全局尺寸
+  size: "medium",
+  // 全局 zIndex 起始值，如果项目的的 z-index 样式值过大时就需要跟随设置更大，避免被遮挡
+  zIndex: 9999,
+  // 版本号，对于某些带数据缓存的功能有用到，上升版本号可以用于重置数据
+  version: 0,
+  // 全局 loading 提示内容，如果为 null 则不显示文本
+  loadingText: null,
+  table: {
+    showHeader: true,
+    showOverflow: "tooltip",
+    showHeaderOverflow: "tooltip",
+    autoResize: true,
+    // stripe: false,
+    border: "inner",
+    // round: false,
+    emptyText: "暂无数据",
+    rowConfig: {
+      isHover: true,
+      isCurrent: true,
+      // 行数据的唯一主键字段名
+      keyField: "_VXE_ID",
+    },
+    columnConfig: {
+      resizable: false,
+    },
+    align: "center",
+    headerAlign: "center",
+  },
+  pager: {
+    // size: "medium",
+    // 配套的样式
+    perfect: false,
+    pageSize: 10,
+    pagerCount: 7,
+    pageSizes: [10, 20, 50],
+    layouts: [
+      "Total",
+      "PrevJump",
+      "PrevPage",
+      "Number",
+      "NextPage",
+      "NextJump",
+      "Sizes",
+      "FullJump",
+    ],
+  },
+  modal: {
+    minWidth: 500,
+    minHeight: 400,
+    lockView: true,
+    mask: true,
+    // duration: 3000,
+    // marginSize: 20,
+    dblclickZoom: false,
+    showTitleOverflow: true,
+    transfer: true,
+    draggable: false,
+  },
+});
+
+export function setupVxeTable(app: App) {
+  // Vxe Table 组件完整引入
+  app.use(VXETable);
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 95335687..22655067 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,5 +1,8 @@
 @use "./reset";
 @use "./element-plus";
+// Vxe Table
+@use "./vxe-table";
+@import url("./vxe-table.css");
 
 .app-container {
   padding: 15px;
diff --git a/src/styles/vxe-table.css b/src/styles/vxe-table.css
new file mode 100644
index 00000000..fc1fa4b3
--- /dev/null
+++ b/src/styles/vxe-table.css
@@ -0,0 +1,92 @@
+/**
+ * @description 所有主题模式下的 Vxe Table CSS 变量
+ * @description 用 Element Plus 的 CSS 变量来覆写 Vxe Table 的 CSS 变量，目的是使 Vxe Table 支持多主题模式且样式统一
+ * @description 在此查阅所有可自定义的变量：https://github.com/x-extends/vxe-table/blob/master/styles/css-variable.scss
+ */
+
+:root {
+  /* color */
+  --vxe-font-color: var(--el-text-color-regular);
+  --vxe-primary-color: var(--el-color-primary);
+  --vxe-success-color: var(--el-color-success);
+  --vxe-info-color: var(--el-color-info);
+  --vxe-warning-color: var(--el-color-warning);
+  --vxe-danger-color: var(--el-color-danger);
+  --vxe-font-lighten-color: var(--el-text-color-primary);
+  --vxe-primary-lighten-color: var(--el-color-primary-light-3);
+  --vxe-success-lighten-color: var(--el-color-success-light-3);
+  --vxe-info-lighten-color: var(--el-color-info-light-3);
+  --vxe-warning-lighten-color: var(--el-color-warning-light-3);
+  --vxe-danger-lighten-color: var(--el-color-danger-light-3);
+  --vxe-font-darken-color: var(--el-text-color-secondary);
+  --vxe-primary-darken-color: var(--el-color-primary-dark-2);
+  --vxe-success-darken-color: var(--el-color-success-dark-2);
+  --vxe-info-darken-color: var(--el-color-info-dark-2);
+  --vxe-warning-darken-color: var(--el-color-warning-dark-2);
+  --vxe-danger-darken-color: var(--el-color-danger-dark-2);
+  --vxe-font-disabled-color: var(--el-text-color-disabled);
+  --vxe-primary-disabled-color: var(--el-color-primary-light-5);
+  --vxe-success-disabled-color: var(--el-color-success-light-5);
+  --vxe-info-disabled-color: var(--el-color-info-light-5);
+  --vxe-warning-disabled-color: var(--el-color-warning-light-5);
+  --vxe-danger-disabled-color: var(--el-color-danger-light-5);
+
+  /* input/radio/checkbox */
+  --vxe-input-border-color: var(--el-border-color);
+  --vxe-input-disabled-color: var(--el-text-color-disabled);
+  --vxe-input-disabled-background-color: var(--el-fill-color-light);
+  --vxe-input-placeholder-color: var(--el-text-color-placeholder);
+
+  /* popup */
+  --vxe-table-popup-border-color: var(--el-border-color);
+
+  /* table */
+  --vxe-table-header-font-color: var(--el-text-color-regular);
+  --vxe-table-footer-font-color: var(--el-text-color-regular);
+  --vxe-table-border-color: var(--el-border-color-lighter);
+  --vxe-table-header-background-color: var(--el-bg-color);
+  --vxe-table-body-background-color: var(--el-bg-color);
+  --vxe-table-footer-background-color: var(--el-bg-color);
+  --vxe-table-row-hover-background-color: var(--el-fill-color-light);
+  --vxe-table-row-current-background-color: var(--el-fill-color-light);
+  --vxe-table-row-hover-current-background-color: var(--el-fill-color-light);
+  --vxe-table-checkbox-range-background-color: var(--el-fill-color-light);
+
+  /* menu */
+  --vxe-table-menu-background-color: var(--el-bg-color-overlay);
+
+  /* loading */
+  --vxe-loading-color: var(--el-color-primary);
+  --vxe-loading-background-color: var(--el-mask-color);
+
+  /* validate */
+  --vxe-table-validate-error-color: var(--el-color-danger);
+
+  /* toolbar */
+  --vxe-toolbar-background-color: var(--el-bg-color);
+  --vxe-toolbar-custom-active-background-color: var(--el-bg-color-overlay);
+  --vxe-toolbar-panel-background-color: var(--el-bg-color-overlay);
+
+  /* pager */
+  --vxe-pager-background-color: var(--el-bg-color);
+
+  /* modal */
+  --vxe-modal-header-background-color: var(--el-bg-color);
+  --vxe-modal-body-background-color: var(--el-bg-color);
+  --vxe-modal-border-color: var(--el-border-color);
+
+  /* button */
+  --vxe-button-default-background-color: var(--el-bg-color-overlay);
+
+  /* input */
+  --vxe-input-background-color: var(--el-fill-color-blank);
+  --vxe-input-panel-background-color: var(--el-fill-color-blank);
+
+  /* form */
+  --vxe-form-background-color: var(--el-bg-color);
+  --vxe-form-validate-error-color: var(--el-color-danger);
+
+  /* select */
+  --vxe-select-option-hover-background-color: var(--el-bg-color-overlay);
+  --vxe-select-panel-background-color: var(--el-bg-color);
+}
diff --git a/src/styles/vxe-table.scss b/src/styles/vxe-table.scss
new file mode 100644
index 00000000..f7376ee5
--- /dev/null
+++ b/src/styles/vxe-table.scss
@@ -0,0 +1,39 @@
+// 自定义 Vxe Table 样式
+
+.vxe-grid {
+  // 表单
+  &--form-wrapper {
+    .vxe-form {
+      padding: 10px 20px;
+      margin-bottom: 20px;
+    }
+  }
+
+  // 工具栏
+  &--toolbar-wrapper {
+    .vxe-toolbar {
+      padding: 20px;
+    }
+  }
+
+  // 分页
+  &--pager-wrapper {
+    .vxe-pager {
+      height: 70px;
+      padding: 0 20px;
+
+      &--wrapper {
+        // 参考 Bootstrap 的响应式设计 WIDTH = 768
+        @media screen and (width <= 768px) {
+          .vxe-pager--total,
+          .vxe-pager--sizes,
+          .vxe-pager--jump,
+          .vxe-pager--jump-prev,
+          .vxe-pager--jump-next {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/views/demo/vxe-table/index.vue b/src/views/demo/vxe-table/index.vue
new file mode 100644
index 00000000..841aff80
--- /dev/null
+++ b/src/views/demo/vxe-table/index.vue
@@ -0,0 +1,632 @@
+<template>
+  <div class="app-container">
+    <!-- 表格 -->
+    <vxe-grid ref="xGrid" v-bind="gridOptions" v-on="gridEvents">
+      <!-- 搜索 -->
+      <!-- <template #form-roles="{ data }">
+        <el-select
+          v-model="data.roles"
+          multiple
+          collapse-tags
+          collapse-tags-tooltip
+          placeholder="请选择角色"
+          filterable
+          clearable
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </template> -->
+      <!-- 左侧按钮列表 -->
+      <template #toolbar-btns>
+        <vxe-button status="primary" icon="vxe-icon-add" @click="curd.onShowModal()">
+          新增用户
+        </vxe-button>
+        <vxe-button status="danger" icon="vxe-icon-delete" @click="curd.onDelete()">
+          批量删除
+        </vxe-button>
+      </template>
+      <!-- 展开列 -->
+      <template #column-expand="{ row }">
+        <div style="padding: 20px">
+          <ul>
+            <li>
+              <span>ID：</span>
+              <span>{{ row.id }}</span>
+            </li>
+            <li>
+              <span>UserName：</span>
+              <span>{{ row.username }}</span>
+            </li>
+            <li>
+              <span>CreateTime：</span>
+              <span>{{ row.createTime }}</span>
+            </li>
+          </ul>
+        </div>
+      </template>
+      <!-- 角色列 -->
+      <template #column-roles="{ row, column }">
+        <el-tag
+          v-for="(role, index) in row[column.field].split(',')"
+          :key="index"
+          :type="role === 'admin' ? 'primary' : 'warning'"
+          effect="plain"
+        >
+          {{ role }}
+        </el-tag>
+      </template>
+      <!-- 操作列 -->
+      <template #column-operate="{ row }">
+        <el-button link type="primary" @click="curd.onShowModal(row)">修改</el-button>
+        <el-button link type="danger" @click="curd.onDelete(row)">删除</el-button>
+      </template>
+    </vxe-grid>
+    <!-- 弹窗 -->
+    <vxe-modal ref="xModal" v-bind="modalOptions">
+      <!-- 表单 -->
+      <vxe-form ref="xForm" v-bind="formOptions" />
+    </vxe-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, onMounted } from "vue";
+import type {
+  VxeGridInstance,
+  VxeGridProps,
+  VxeGridListeners,
+  VxeModalInstance,
+  VxeModalProps,
+  VxeFormInstance,
+  VxeFormProps,
+} from "vxe-table";
+import { VXETable } from "vxe-table";
+
+const options = [
+  { label: "管理员", value: "admin" },
+  { label: "用户", value: "user" },
+  { label: "访客", value: "guest" },
+];
+onMounted(() => {
+  setTimeout(() => {
+    gridOptions!.formConfig!.items!.forEach((item) => {
+      if (item.field === "roles") {
+        item!.itemRender!.props!.options = options;
+      }
+    });
+  }, 500);
+});
+
+// #region vxe-grid
+interface RowMeta {
+  id: number;
+  username: string;
+  roles: string;
+  phone: string;
+  email: string;
+  status: boolean;
+  createTime: string;
+}
+const xGrid = ref<VxeGridInstance<RowMeta>>();
+const gridOptions = reactive<VxeGridProps<RowMeta>>({
+  // 自动监听父元素的变化去重新计算表格
+  autoResize: true,
+  // 是否显示表尾
+  showFooter: true,
+  // 表尾数据（优先级比 footerMethod 高）
+  // footerData: [
+  //   {
+  //     username: "-",
+  //     roles: "-",
+  //     phone: "-",
+  //     email: "-",
+  //     status: "启用：7条",
+  //     createTime: "-",
+  //   },
+  // ],
+  // 表尾的数据获取方法，返回一个二维数组
+  footerMethod({ columns, data }) {
+    return [
+      columns.map((column, columnIndex) => {
+        if (columnIndex === 0 || column.field === undefined) {
+          return "";
+        } else if (column.field === "status") {
+          return `启用：${data.reduce((sum, row) => sum + (row.status ? 1 : 0), 0)}条`;
+        }
+        return "-";
+      }),
+    ];
+  },
+  // 列配置
+  columns: [
+    { type: "checkbox", width: 60 },
+    {
+      type: "expand",
+      width: 60,
+      slots: {
+        // 只对 type=expand 有效，自定义展开后的内容模板
+        content: "column-expand",
+      },
+    },
+    { type: "seq", width: 60 },
+    { field: "id", title: "ID", visible: false },
+    { field: "username", title: "用户名" },
+    { field: "roles", title: "角色", slots: { default: "column-roles" } },
+    { field: "phone", title: "手机号" },
+    { field: "email", title: "邮箱" },
+    {
+      field: "status",
+      title: "状态",
+      sortable: true,
+      filters: [
+        { label: "启用", value: true },
+        { label: "禁用", value: false },
+      ],
+      // 数据筛选，只对 filters 有效，筛选是否允许多选
+      filterMultiple: false,
+      formatter({ cellValue }) {
+        return cellValue === true ? "启用" : "禁用";
+      },
+    },
+    { field: "createTime", title: "创建时间", sortable: true },
+    {
+      title: "操作",
+      width: "150px",
+      fixed: "right",
+      showOverflow: false,
+      slots: {
+        default: "column-operate",
+      },
+    },
+  ],
+  // 列配置信息
+  columnConfig: {
+    // 每一列是否启用列宽调整
+    resizable: true,
+  },
+  // 自定义列配置项
+  customConfig: {
+    // 是否允许列选中
+    checkMethod: ({ column }) => !["username"].includes(column.field),
+  },
+  // 复选框配置项
+  checkboxConfig: {
+    // 是否保留勾选状态（需要有 row-config.keyField）
+    // reserve: true,
+  },
+  // 展开行配置项（不支持虚拟滚动）
+  expandConfig: {
+    // 展开列显示的字段名，可以直接显示在单元格中
+    // labelField: "username",
+    // 每次只能展开一行
+    accordion: true,
+  },
+  // 行配置信息
+  rowConfig: {
+    // 自定义行数据唯一主键的字段名
+    keyField: "id",
+    // 当鼠标点击行时，是否要高亮当前行
+    isCurrent: true,
+  },
+  // 表单配置项
+  formConfig: {
+    // 项配置
+    items: [
+      {
+        span: 4,
+        field: "username",
+        title: "用户名",
+        // 前缀配置项
+        titlePrefix: {
+          useHTML: true,
+          content:
+            '点击链接：<a class="link" href="https://vxetable.cn" target="_blank">vxe-table官网</a>',
+          icon: "vxe-icon-question-circle-fill",
+        },
+        // 项渲染器配置项
+        itemRender: {
+          // 渲染器名称
+          name: "VxeInput",
+          // 渲染的参数
+          props: {
+            type: "text",
+            clearable: true,
+            placeholder: "请输入用户名",
+          },
+        },
+      },
+      {
+        span: 4,
+        field: "roles",
+        title: "角色",
+        // 默认收起
+        folding: true,
+        itemRender: {
+          name: "VxeSelect",
+          props: {
+            multiple: true,
+            multiCharOverflow: -1,
+            filterable: true,
+            clearable: true,
+            options: [],
+            placeholder: "请选择角色",
+          },
+        },
+      },
+      // {
+      //   span: 4,
+      //   field: "roles",
+      //   title: "角色",
+      //   // 默认收起
+      //   folding: true,
+      //   // 插槽
+      //   slots: {
+      //     // 自定义表单项
+      //     default: "form-roles",
+      //   },
+      // },
+      {
+        collapseNode: true,
+        itemRender: {
+          name: "VxeButtonGroup",
+          options: [
+            {
+              type: "submit",
+              status: "primary",
+              icon: "vxe-icon-search",
+              content: "搜索",
+            },
+            { type: "reset", icon: "vxe-icon-refresh", content: "重置" },
+          ],
+        },
+      },
+    ],
+  },
+  // 工具栏配置
+  toolbarConfig: {
+    // 导入按钮配置（需要设置 "import-config"）
+    import: true,
+    // 导出按钮配置（需要设置 "export-config"）
+    export: true,
+    // 打印按钮配置（需要设置 "print-config"）
+    print: true,
+    // 刷新按钮配置
+    refresh: true,
+    // 是否允许最大化显示
+    zoom: true,
+    // 自定义列配置
+    custom: true,
+    //插槽
+    slots: {
+      // 按钮列表
+      buttons: "toolbar-btns",
+    },
+  },
+  // 导入配置项
+  importConfig: {},
+  // 导出配置项
+  exportConfig: {
+    // 指定列
+    columns: [{ field: "phone" }, { field: "email" }, { field: "status" }, { field: "createTime" }],
+  },
+  // 打印配置项
+  printConfig: {},
+  // 筛选配置项
+  filterConfig: {
+    // 所有列是否使用服务端筛选
+    remote: false,
+  },
+  // 排序配置项
+  sortConfig: {
+    // 所有列是否使用服务端排序
+    remote: false,
+    // 是否启用多列组合筛选
+    multiple: false,
+    // 只对 multiple 有效，是否按照先后触发顺序进行排序
+    chronological: true,
+  },
+  // 分页配置项
+  pagerConfig: {
+    enabled: true,
+    pageSize: 10,
+  },
+  // 数据代理配置项
+  proxyConfig: {
+    // 是否自动加载查询数据
+    autoLoad: true,
+    // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
+    seq: true,
+    // 表单代理
+    form: true,
+    // 是否代理筛选（只对 filter-config.remote=true 时有效）
+    filter: true,
+    // 是否代理排序（只对 sort-config.remote=true 时有效）
+    sort: true,
+    // 获取响应的值配置
+    response: {
+      // 只对 pager-config 配置了有效，响应结果中获取数据列表的属性（分页场景）
+      result: "result",
+      // 只对 pager-config 配置了有效，响应结果中获取分页的属性（分页场景）
+      total: "total",
+    },
+    ajax: {
+      // 接收 Promise
+      query: ({ page: { currentPage, pageSize }, form, filters, sort, sorts }) => {
+        console.log({ currentPage, pageSize, form, filters, sort, sorts });
+        return new Promise<{ total: number; result: RowMeta[] }>((resolve) => {
+          setTimeout(() => {
+            const list = [
+              {
+                username: "Richard Clark",
+                roles: "editor",
+                phone: "18185826431",
+                email: "y.djf@xiswx.fk",
+                status: true,
+                createTime: "2010-04-17 12:39:20",
+                id: 810000201008060500,
+              },
+              {
+                username: "Robert Garcia",
+                roles: "admin",
+                phone: "18125716043",
+                email: "z.japgndxosu@inoudjxc.ie",
+                status: false,
+                createTime: "2020-01-02 11:51:58",
+                id: 130000201904129330,
+              },
+              {
+                username: "Thomas Moore",
+                roles: "admin",
+                phone: "18106622048",
+                email: "j.fvsgnjjutm@fmjw.se",
+                status: true,
+                createTime: "1983-10-12 10:06:41",
+                id: 420000198203053100,
+              },
+              {
+                username: "Dorothy Lewis",
+                roles: "admin",
+                phone: "13321357284",
+                email: "o.htso@iwxvehrs.tj",
+                status: true,
+                createTime: "1970-03-03 00:26:45",
+                id: 150000201803243100,
+              },
+              {
+                username: "George Rodriguez",
+                roles: "admin",
+                phone: "18158641167",
+                email: "x.sigizx@fwknokiqn.tr",
+                status: true,
+                createTime: "1988-03-16 14:46:26",
+                id: 610000199308265900,
+              },
+              {
+                username: "Angela Jackson",
+                roles: "admin",
+                phone: "19810721230",
+                email: "j.gqrdqaqtu@ipthgm.fj",
+                status: true,
+                createTime: "2006-09-26 12:53:37",
+                id: 350000197310101440,
+              },
+              {
+                username: "James Walker",
+                roles: "admin",
+                phone: "18123903251",
+                email: "k.axmdcsl@mcmeudog.cl",
+                status: true,
+                createTime: "1981-01-19 12:51:34",
+                id: 130000199308208900,
+              },
+              {
+                username: "Paul Garcia",
+                roles: "admin",
+                phone: "18617930381",
+                email: "c.glufsn@vwqntlllj.es",
+                status: false,
+                createTime: "2009-12-04 20:40:57",
+                id: 510000199212239200,
+              },
+              {
+                username: "Jeffrey Miller",
+                roles: "admin",
+                phone: "18145245413",
+                email: "u.poqrqw@arto.rw",
+                status: false,
+                createTime: "1991-04-01 05:16:52",
+                id: 330000198604109760,
+              },
+              {
+                username: "Donna Lewis",
+                roles: "editor",
+                phone: "19839835537",
+                email: "l.lmpeoupu@rujdlzdbk.gf",
+                status: true,
+                createTime: "1987-11-29 21:47:37",
+                id: 640000197005230500,
+              },
+              {
+                username: "Jennifer Smith",
+                roles: "editor",
+                phone: "18145245413",
+                email: "j.jqx@xjxqx.jp",
+                status: true,
+                createTime: "1991-04-01 05:16:52",
+                id: 640000197005230000,
+              },
+            ];
+            resolve({
+              result: list.slice((currentPage - 1) * pageSize, currentPage * pageSize),
+              total: list.length,
+            });
+          }, 500);
+        });
+      },
+    },
+  },
+});
+const gridEvents: VxeGridListeners<RowMeta> = {
+  // 只对 form-config 配置时有效，表单重置时会触发该事件
+  formReset() {
+    console.log("Form Reset");
+  },
+};
+// #endregion
+
+// #region vxe-modal
+const xModal = ref<VxeModalInstance>();
+const modalOptions = reactive<VxeModalProps>({
+  // 窗口的标题
+  title: "",
+  // 是否允许点击遮罩层关闭窗口
+  maskClosable: true,
+  // 是否允许按 Esc 键关闭窗口
+  escClosable: true,
+  // 在窗口隐藏之前执行
+  beforeHideMethod: () => {
+    xForm.value?.clearValidate();
+    return Promise.resolve();
+  },
+});
+// #endregion
+
+// #region vxe-form
+const xForm = ref<VxeFormInstance>();
+const formOptions = reactive<VxeFormProps>({
+  // 所有项的栅格占据的列数
+  span: 24,
+  // 所有项的标题宽度
+  titleWidth: 100,
+  // 表单数据
+  data: {
+    username: "",
+    password: "",
+  },
+  // 项列表
+  items: [
+    {
+      field: "username",
+      title: "用户名",
+      itemRender: {
+        name: "VxeInput",
+        props: {
+          placeholder: "请输入",
+        },
+      },
+    },
+    {
+      field: "password",
+      title: "密码",
+      itemRender: {
+        name: "VxeInput",
+        props: {
+          placeholder: "请输入",
+        },
+      },
+    },
+    {
+      align: "right",
+      itemRender: {
+        name: "$buttons",
+        children: [
+          {
+            props: {
+              content: "取消",
+            },
+            events: {
+              click: () => xModal.value?.close(),
+            },
+          },
+          {
+            props: {
+              type: "submit",
+              content: "确定",
+              status: "primary",
+            },
+            events: {
+              click: () => curd.onSubmitForm(),
+            },
+          },
+        ],
+      },
+    },
+  ],
+  /** 校验规则 */
+  rules: {
+    username: [
+      {
+        required: true,
+        validator: ({ itemValue }) => {
+          switch (true) {
+            case !itemValue:
+              return new Error("请输入");
+            case !itemValue.trim():
+              return new Error("空格无效");
+          }
+        },
+      },
+    ],
+    password: [
+      {
+        required: true,
+        validator: ({ itemValue }) => {
+          switch (true) {
+            case !itemValue:
+              return new Error("请输入");
+            case !itemValue.trim():
+              return new Error("空格无效");
+          }
+        },
+      },
+    ],
+  },
+});
+// #endregion
+
+const curd = {
+  commitQuery: () => xGrid.value?.commitProxy("query"),
+  onShowModal: (row?: RowMeta) => {
+    if (row) {
+      modalOptions.title = "修改用户";
+    } else {
+      modalOptions.title = "新增用户";
+    }
+    xModal.value?.open();
+  },
+  /** 确定并保存 */
+  onSubmitForm: () => {
+    console.log("提交表单");
+  },
+  onDelete: (row?: RowMeta) => {
+    let ids = [];
+    if (row === undefined) {
+      // 获取当前已选中的行数据
+      const selected = xGrid.value?.getCheckboxRecords();
+      if (!selected || selected.length === 0) {
+        VXETable.modal.message({
+          content: "请至少选择一条数据",
+          status: "warning",
+        });
+        return;
+      }
+      ids = selected.map((item) => item.id);
+    } else {
+      ids = [row.id];
+    }
+    VXETable.modal.confirm("确定要删除吗？").then((type) => {
+      if (type === "confirm") {
+        // 执行删除操作
+        console.log("删除的ID：", ids);
+      }
+    });
+  },
+};
+</script>
+
+<style scoped></style>