Question

我正在尝试在cellClick上弹出一个模式。我没有收到任何错误，但是没有用。该表格仍会加载，而我的其他功能则在cellClick上运行，而不是模式上。我正在使用Vue，制表器，引导程序。

<script>
  var Tabulator = require('tabulator-tables')
  export default {
    name: 'Test',
    data: function () {
      return {
        modalShow: false,
        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
        layout: 'fitColumns',
        columns: [
          {title: 'Name', field: 'name', sorter: 'string', width: 200},
          {title: 'Age', field: 'age', sorter: 'number', align: 'right', formatter: 'progress'}
        ],
        cellClick: function (e, cell) {
          var name = cell.getRow().getCell('name').getValue()
          var value = cell.getValue()
          var field = cell.getField()
          console.log(name, value, field)
          return {
            modalShow: true
          }
        }
      })
    }
  }
</script>

<template>
  <div ref="table">
    <b-modal v-model="modalShow">Test</b-modal>
  </div>
</template>

Answer 1

用户@dagalti几乎是正确的-在他们的示例中，this是指制表器，因此您必须在提升了的范围内使用名为self的变量捕获Vue实例。在下面查看我对您的代码的修改。

mounted () {
  var self = this;

  // instantiate Tabulator when element is mounted
  this.tabulator = new Tabulator(this.$refs.table, {
    data: this.tableData, // link data to table
    layout: 'fitColumns',
    columns: [
      {title: 'Name', field: 'name', sorter: 'string', width: 200},
      {title: 'Age', field: 'age', sorter: 'number', align: 'right', formatter: 'progress'}
    ],
    cellClick: function (e, cell) {
      var name = cell.getRow().getCell('name').getValue()
      var value = cell.getValue()
      var field = cell.getField()
      console.log(name, value, field)

      self.modalShow = true;
    }
  })
}

无法在cellClick上打开模式

1 个答案: