VXETable 高级表格

集成 VXETable（vxe-table）高性能表格，锁定 vxe-table@~4.6.25，无需引入 vxe-pc-ui。在线演示

安装

{
  "dependencies": {
    "vxe-table": "~4.6.25"
  }
}

pnpm install

样式引入

在 src/main.ts 引入（不要引入 vxe-pc-ui/lib/style.css）：

import "vxe-table/lib/style.css";

样式覆盖统一写在 src/styles/vxe-table.scss，由 src/styles/index.scss 导入。

插件注册

import VXETable from "vxe-table";
import { configureVxeTable } from "@/plugins/vxe-table";

configureVxeTable();  // 在 app.use(VXETable) 之前执行
app.use(VXETable);

全局配置

// src/plugins/vxe-table.ts
VXETable.setConfig({
  table: {
    showOverflow: "tooltip",
    showHeaderOverflow: "tooltip",
  },
});

升级到 4.17+ 的差异

vxe-table@>=4.17 将 vxe-modal、vxe-button 等 UI 组件拆分到 vxe-pc-ui，需要额外安装并注册：

import VXETable from "vxe-table";
import VxeUI from "vxe-pc-ui";

VXETable.use(VxeUI);  // 注意是 VXETable.use，不是 app.use
app.use(VXETable);

同时引入 vxe-table/lib/style.css 和 vxe-pc-ui/lib/style.css。

版本锁定

项目锁定 vxe-table@~4.6.25。若启动报 vxe-pc-ui 解析失败，是依赖未按锁文件安装，删除 node_modules 后重新 pnpm install。