Vue集成Tabulator组件时列重叠堆叠问题求助

问题根源 #

你的代码仅导入了Tabulator的JavaScript库，未引入其核心CSS文件。Tabulator的表格布局、列排列完全依赖自带的样式规则，缺失后会导致列堆叠、样式失效等问题。

解决步骤 #

1. 导入Tabulator CSS文件
   在组件的<script>开头添加CSS导入（npm安装场景）：

   import { TabulatorFull as Tabulator } from 'tabulator-tables';
   import 'tabulator-tables/dist/css/tabulator.min.css'; // 新增这行核心样式导入
   

2. 清理重复的列宽配置
   你的Gender列重复设置了width属性（同时写了width:95和width:100），建议删除重复项，保持配置一致性：

   { title: "Gender", field: "gender", width: 100, editor: "select", editorParams: { values: ["male", "female"] } },
   

3. 可选：确保容器有足够宽度
   如果父容器宽度不足，会导致列挤压堆叠，可给表格容器设置最小宽度：

   <template>
     <div ref="table" style="min-width: 850px;"></div>
   </template>
   

修改后的完整代码 #

<script>
import { TabulatorFull as Tabulator } from 'tabulator-tables';
import 'tabulator-tables/dist/css/tabulator.min.css'; // 导入核心样式

export default {
  data() {
    return {
      tabulator: null,
      testData: [
        { id: 1, name: "Oli Bob", progress: 12, gender: "male", rating: 1, col: "red", dob: "19/02/1984", car: 1 },
        { id: 2, name: "Mary May", progress: 1, gender: "female", rating: 2, col: "blue", dob: "14/05/1982", car: true },
        { id: 3, name: "Christine Lobowski", progress: 42, gender: "female", rating: 0, col: "green", dob: "22/05/1982", car: "true" },
        { id: 4, name: "Brendon Philips", progress: 100, gender: "male", rating: 1, col: "orange", dob: "01/08/1980" },
        { id: 5, name: "Margret Marmajuke", progress: 16, gender: "female", rating: 5, col: "yellow", dob: "31/01/1999" },
        { id: 6, name: "Frank Harbours", progress: 38, gender: "male", rating: 4, col: "red", dob: "12/05/1966", car: 1 }
      ]
    }
  },
  mounted() {
    this.tabulator = new Tabulator(this.$refs.table, {
      data: this.testData,
      columns: [
        { title: "Name", field: "name", editor: "input", width: 100, headerVertical: true },
        { title: "Task Progress", field: "progress", hozAlign: "left", width: 100, formatter: "progress", editor: true },
        { title: "Gender", field: "gender", width: 100, editor: "select", editorParams: { values: ["male", "female"] } },
        { title: "Rating", field: "rating", formatter: "star", hozAlign: "center", width: 100, editor: true },
        { title: "Color", field: "col", width: 130, editor: "input" },
        { title: "Date Of Birth", field: "dob", width: 130, sorter: "date", hozAlign: "center" },
        { title: "Driver", field: "car", width: 90, hozAlign: "center", formatter: "tickCross", sorter: "boolean", editor: true },
      ]
    });
  }
}
</script>

<template>
  <div ref="table" style="min-width: 850px;"></div>
</template>

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