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

Question

我正在尝试将日期时间功能与 Tabulator 一起使用，这需要 moment.js 库。在添加 Tabulator 之前的我的应用程序中，moment.js 已经在该级别的某些组件中使用。我有一个使用制表符并尝试使用日期时间的新测试组件。通常我只会导入 moment 并在此处使用它，但似乎 Tabulator 本身需要 moment 。

我的第一个想法是 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>
```

我收到错误："Uncaught (in promise) Reference Error: moment is not defined at Format.datetime (tabulator.js?ab1f:14619)" 我可以通过使用 this.$moment() 在其他组件中使用时刻，但我需要它在 node_modules\tabulator-tables\dist\js\tabulator.js 中可用因为那是错误发生的地方。知道如何包含库吗？

Answer 1

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

我喜欢开源的一个原因是您可以准确地看到图书馆正在做什么来帮助解决问题。快速搜索 Tabulator 代码库会发现：

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

var newDatetime = moment(value, inputFormat);

格式化程序只是直接调用moment，没有引入它。它显然是围绕期望图书馆在全球范围内可用的老派机制设计的。在浏览器领域，这意味着它在 "window" 对象上。两个快速选项可以解决此问题：

使用 CDN 托管的 Moment 版本，例如 https://cdnjs.com/libraries/moment.js/，方法是在您的页面模板的页眉中放置如下内容：
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
```
调整上面的代码以在 window:
上设置时刻
```
window.moment = moment;
```

ohgodwhy 上面的评论从 date-fns 在很多方面都更好的角度来看不一定是错误的。但它对你不起作用，因为 Tabulator 是硬编码来寻找力矩的，所以你需要力矩本身才能工作。

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

Issues including Moment.js library for use with Tabulator in Vue.js

vue.js

vuejs2

vue-component

tabulator