使用 Tabulator 在 VueJS 中显示 table 的问题

Question

我正在尝试在 Vue.JS 中设置基本制表符 table，我看到了 table，但样式已损坏。

我设置了一个新的（基本的）VueJS 项目并按照此处列出的 Vue 设置说明进行操作：http://tabulator.info/docs/4.1/frameworks#vue 我添加了一些示例数据和运行应用程序 (npm 运行 dev)

这是我的代码： Testpage.vue


    <script>
    var Tabulator = require('tabulator-tables')
    export default {
      name: 'Test',
      data: function () {
        return {
          tabulator: null, // variable to hold your table
          tableData: [
            {name: 'Billy Bob', age: '12'},
            {name: 'Mary May', age: '1'}
          ] // data for table to display
        }
      },
      watch: {
        // update table if data changes
        tableData: {
          handler: function (newData) {
            this.tabulator.replaceData(newData)
          },
          deep: true
        }
      },
      created: function () {
        console.log('Test', this.$refs)
      },
      mounted () {
        // instantiate Tabulator when element is mounted
        this.tabulator = new Tabulator(this.$refs.table, {
          data: this.tableData, // link data to table
          columns: [
            {title: 'Name', field: 'name', sorter: 'string', width: 200, editor: true},
            {title: 'Age', field: 'age', sorter: 'number', align: 'right', formatter: 'progress'}
          ]
        })
      },
      template: '<div ref="table"></div>'
    }
    </script>

App.vue:


    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view/>
      </div>
    </template>

    <script>
    export default {
      name: 'App'
    }
    </script>

    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

Main.js


    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'

    Vue.config.productionTip = false

    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })

路由器(index.js)


    import Vue from 'vue'
    import Router from 'vue-router'
    import Test from '@/components/TestPage'
    import HelloWorld from '@/components/HelloWorld'

    Vue.use(Router)

    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        { path: '/test', name: 'Test', component: Test }
      ]
    })

我希望看到样式 table 就像文档中的演示一样。页面上出现没有样式的 table。（无边框、颜色等）

Answer 1

您需要将 Tabulator 目录中的 /dist/css/tabulator.css 文件包含在您的项目中CSS 的其余部分引入 table 样式。

你如何做到这一点将取决于你正在开发的环境

Answer 2

我尝试自行设置所描述的最小 Vue.JS 项目，但在控制台中遇到以下消息

> [Vue warn]: You are using the runtime-only build of Vue where the
> template compiler is not available. Either pre-compile the templates
> into render functions, or use the compiler-included build.

要避免此消息，必须修改 Testpage.vue。在我的例子中，它可以将键 'template' 及其值从脚本部分移动到它自己的 'template' 部分。

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

<script>
const Tabulator = require('tabulator-tables');

export default {
  name: 'Test',
  data() {
    return {
      tabulator: null, // variable to hold your table
      tableData: [
        { name: 'Billy Bob', age: '12' },
        { name: 'Mary May', age: '1' },
      ], // data for table to display
    };
  },
  watch: {
    // update table if data changes
    tableData: {
      handler(newData) {
        this.tabulator.replaceData(newData);
      },
      deep: true,
    },
  },
  created() {
    // console.log('Test', this.$refs);
  },
  mounted() {
    // instantiate Tabulator when element is mounted
    this.tabulator = new Tabulator(this.$refs.table, {
      data: this.tableData, // link data to table
      columns: [
        {
          title: 'Name', field: 'name', sorter: 'string', width: 200, editor: true,
        },
        {
          title: 'Age', field: 'age', sorter: 'number', align: 'right', formatter: 'progress',
        },
      ],
    });
  },
};
</script>

使用 Tabulator 在 VueJS 中显示 table 的问题

Issue displaying table in VueJS using Tabulator

tabulator