Question

我正在尝试使用Tabulator的Date Time功能，该功能需要moment.js库。在添加Tabulator的应用程序中，moment.js已经在该级别的某些组件中使用。我有一个新的测试组件，该组件使用Tabulator并尝试使用datetime。通常，我只需要导入一下矩并在此处使用它，但看来Tabulator本身需要这个矩。

我首先想到的是Moment.js需要在应用程序中全局设置，所以我这样做了。

Main.js：

```
   import Vue from 'vue'
   import App from './App'
   import router from './router'
   import { store } from './store'
   import Vuetify from 'vuetify'
   import 'vuetify/dist/vuetify.min.css'
   import moment from 'moment'

   Vue.prototype.moment = moment

   ...............

   new Vue({
   el: '#app',
   data () {
    return {
      info: null,
      loading: true,
      errored: false // this.$root.$data.errored
    }
  },
  router,
  components: { App },
  template: '<App/>',
  store
  })

```

在我的组件（Testpage.vue）

```
<template>
  <div>
    <div ref="example_table"></div>
  </div>
</template>

<script>
// import moment from 'moment'
var Tabulator = require('tabulator-tables')
export default {
  name: 'Test',
  data: function () {
    return {
      tabulator: null, // variable to hold your table
      tableData: [{id: 1, date: '2019-01-10'}] // data for table to display
    }
  },
  watch: {
    // update table if data changes
    tableData: {
      handler: function (newData) {
        this.tabulator.replaceData(newData)
      },
      deep: true
    }
  },
mounted () {
    // instantiate Tabulator when element is mounted
    this.tabulator = new Tabulator(this.$refs.example_table, {
      data: this.tableData, // link data to table
      columns: [
        {title: 'Date', field: 'date', formatter: 'datetime', formatterParams: {inputFormat: 'YYYY-MM-DD', outputFormat: 'DD/MM/YY', invalidPlaceholder: '(invalid date)'}}
      ],
}
</script>
```

我收到错误：“未捕获（按承诺）参考错误：在Format.datetime（tabulator.js？ab1f：14619）未定义矩” 我可以通过使用this。$ moment（）在其他组件中使用矩，但是我需要它可以在node_modules \ tabulator-tables \ dist \ js \ tabulator.js中可用因为多数民众赞成在发生错误。知道如何包含该库吗？

Answer 1

回到您尝试的第一个选项，因为用瞬间注释Vue原型绝对不是正确的方法。即使推荐（不是推荐），Tabulator也必须知道通过查找Vue.moment来找到它。没有这样做的代码。

我喜欢开放源代码的一件事是，您可以确切地看到库在做什么以帮助解决该问题。快速搜索Tabulator代码库可找到以下内容：

https://github.com/olifolkerd/tabulator/blob/3aa6f17b04cccdd36a334768635a60770aa10e38/src/js/modules/format.js

<style name="AppTheme.SpinnerDialog" parent="Theme.AppCompat.Dialog">
     <item name="android:background">#222222</item>
</style>

格式化程序只是直接调用矩，而无需导入。它显然是围绕希望图书馆在全球范围内可用的传统机制设计的。在浏览器范围内，这意味着它位于“窗口”对象上。有两个快速选择可以解决此问题：

使用CDN托管的Moment版本，例如https://cdnjs.com/libraries/moment.js/，方法是在页面模板的标题中放置以下内容：
```
var newDatetime = moment(value, inputFormat);
```

在上方调整您的代码以在窗口上设置力矩：

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>

ohgodwhy上面的评论从date-fns在许多方面都更好的角度来看并不一定是错误的。但这对您不起作用，因为制表器经过硬编码以寻找时机，因此您需要时机本身才能工作。

问题，包括与Vue.js中的Tabulator一起使用的Moment.js库

1 个答案: