为什么制表符列在 UI 中重叠？

Question

我正在尝试创建一个使用 Tabulator 的 Vue 组件。我正在关注 Tabulator 网站上的文档并在 UI 中显示表格，但看起来所有列都堆叠/坐在彼此之上......

到目前为止我的尝试：

<script>
import { TabulatorFull as Tabulator } from 'tabulator-tables'; //import Tabulator library

export default {
  data() {
    return {
      tabulator: null, //variable to hold your table
      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() {
    //instantiate Tabulator when element is mounted
    this.tabulator = new Tabulator(this.$refs.table, {
      data: this.testData, //link data to table
      columns: [                 //define the table 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: 95, editor: "select", width: 100, 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"></div>
</template>

我尝试过的事情...

• 自动调整列
• 静态列宽

我确定我错过了一些简单的东西，但老实说我不知道它可能是什么。 CSS 问题？ 理想情况下，该表应如下所示： .

Answer 1

您缺少表格 CSS。

关于您需要做什么的文档相当稀疏（参见here和here）。

但我认为您始终可以像这样导入生成的 CSS：

import 'tabulator-tables/dist/css/tabulator.min.css' 

有几个可用的主题，例如 bootstrap、material 等，请参阅此列表以获取选项