Question

I am trying to set up a basic Tabulator table in Vue.JS and I see the table but the styling is broken.

I set up a new(basic) VueJS project and followed the instructions for Vue setup listed here: http://tabulator.info/docs/4.1/frameworks#vue I added some sample data and the ran the app (npm run dev)

Here is my code: 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/>'
    })

Router(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 }
      ]
    })

I expect to see a styled table like the demo shows in the documentation. A table with no styling appears on the page. (No borders, colors, etc)

Answer 1

您需要将项目的Tabulator目录中的 /dist/css/tabulator.css 文件与其他CSS一起添加，以实现表格样式

您的操作方式取决于您所开发的环境

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>
    <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>

Issue displaying table in VueJS using Tabulator

2 个答案: