Vue.js 3中集成Tabulator 5.3.4遇问题，求技术指导

核心问题分析 #

你的代码存在三个关键问题导致表格无法正常渲染：

• 重复DOM ID冲突：index.html 和 TheWelcome.vue 中都定义了 id="example-table"，浏览器中ID必须唯一，导致Tabulator无法正确定位目标元素。
• Tabulator初始化时机错误：在组件的普通<script>中直接执行new Tabulator，此时组件DOM还未挂载，找不到目标容器元素。
• 缺失Tabulator样式文件：未引入Tabulator的CSS，即使渲染成功也看不到正常表格样式。

分步修正方案 #

1. 移除重复的DOM ID #

删除index.html中的冗余容器，保留根容器即可：

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <link rel="icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Vite App</title>
 </head>
 <body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

2. 调整Tabulator初始化时机 #

在Vue3的<script setup>中，使用onMounted钩子确保DOM挂载完成后再初始化Tabulator，同时用ref获取容器元素（更符合Vue组件规范）：

<script setup lang="ts">
import WelcomeItem from "./WelcomeItem.vue";
import DocumentationIcon from "./icons/IconDocumentation.vue";
import ToolingIcon from "./icons/IconTooling.vue";
import EcosystemIcon from "./icons/IconEcosystem.vue";
import CommunityIcon from "./icons/IconCommunity.vue";
import SupportIcon from "./icons/IconSupport.vue";
import { Tabulator, FormatModule, EditModule } from "tabulator-tables";
// 引入Tabulator核心样式
import "tabulator-tables/dist/css/tabulator.min.css";
import { onMounted, ref, onUnmounted } from "vue";

Tabulator.registerModule([FormatModule, EditModule]);

const tableRef = ref<HTMLElement | null>(null);
let tableInstance: Tabulator | null = null;

// 表格列配置
const columns = [
  { title: "Name", field: "name", width: 150 },
  { title: "Age", field: "age", hozAlign: "left", formatter: "progress" },
  { title: "Favourite Color", field: "col" },
  { title: "Date Of Birth", field: "dob", hozAlign: "center" },
  { title: "Rating", field: "rating", hozAlign: "center", formatter: "star" },
  {
    title: "Passed?",
    field: "passed",
    hozAlign: "center",
    formatter: "tickCross",
  },
];

// 表格数据
const data = [
  { id: 1, name: "Oli Bob", age: "12", col: "red", dob: "" },
  { id: 2, name: "Mary May", age: "1", col: "blue", dob: "14/05/1982" },
];

// DOM挂载完成后初始化表格
onMounted(() => {
  if (tableRef.value) {
    tableInstance = new Tabulator(tableRef.value, {
      data: data,
      debugInvalidOptions: false,
      columns: columns,
    });
  }
});

// 组件销毁时释放表格资源
onUnmounted(() => {
  tableInstance?.destroy();
});
</script>

<template>
  <div ref="tableRef"></div>
</template>

3. 清理冗余代码 #

删除TheWelcome.vue中的普通<script>标签，所有逻辑统一移到<script setup>中，符合Vue3组件编写规范。

额外优化提示 #

• 如果需要响应式更新表格数据，可以监听数据变化，调用tableInstance?.setData(新数据)方法更新表格内容。
• 若需自定义表格样式，可引入Tabulator的主题CSS（如tabulator-tables/dist/css/tabulator_midnight.min.css）替换核心样式。

内容的提问来源于stack exchange，提问作者Lyes