Проблема невозможности получения данных в VueJs с помощью Tabulator - PullRequest
Новая
       26

Проблема невозможности получения данных в VueJs с помощью Tabulator

0 голосов
/ 25 марта 2020

Я настроил таблицу с помощью табулятора в VueJs. Я следовал инструкциям по настройке табулятора в VueJs из: http://tabulator.info/docs/4.1/frameworks#vue Здесь я пытаюсь получить данные из таблицы. По какой-то причине я не могу получить. Я вижу свою таблицу, но без данных. Вот мой код: 

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

 <script>
    var Tabulator = require('tabulator-tables')
    export default {
      name: 'Location',
      data: function () {
        return {
          tabulator: null, // variable to hold your table
          location: [] // data for table to display
        }
      },
      watch: {
        // update table if data changes
        location: {
          handler: function (newData) {
            this.tabulator.replaceData(newData)
          },
          deep: true
        }
      },
      created: function () {
        console.log('Location', this.$refs)
        this.initialize()
      },
      mounted () {
        // instantiate Tabulator when element is mounted
        this.tabulator = new Tabulator(this.$refs.table, {
          data: this.location, // link data to table
          addRowPos:"bottom",

                  columns: [
            {title: 'Code', field: 'code', sorter: 'string',width: 100,  editor: 'input' , validator: "required"},
            {title: 'Name', field: 'name', sorter: 'string', width: 200 , validator: "required",editor:"autocomplete", editorParams:{allowEmpty:true, showListOnEmpty:true, values:true}},
            {title: 'Under', field: 'under', sorter: 'string', width: 200,  editor: 'input' , validator: "required"},
            {title: 'Status', field: 'status', sorter: 'string',width: 100,  editor: 'input' , validator: "required"},
            {title: 'Description', field: 'description', sorter: 'string', width: 200,  editor: 'input' , validator: "required"},
            {title: 'Depth', field: 'depth', sorter: 'string', width: 100,  editor: 'input' , validator: "required"}


          ]
        })

        //Reset table contents on "Reset the table" button click
$("reset").click(function(){
    table.setData(tabledata);
})

 },

    }
    </script>

1 Ответ

0 голосов
/ 01 апреля 2020 
<template>

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


</template>

 <script>
    var Tabulator = require('tabulator-tables')
    export default {
      name: 'Location',
      data: function () {
        return {
          tabulator: null, // variable to hold your table
          location: [] // data for table to display
        }
      },
      watch: {
        // update table if data changes
        location: {
          handler: function (newData) {
            this.tabulator.replaceData(newData)
          },
          deep: true
        }
      },
      created: function () {
        console.log('Location', this.$refs)
        this.initialize()
      },
       methods: {
       initialize () {
          axios.get('/api/location')
        .then(response => this.location =  response.data.location)

        }
       },
      mounted () {
        // instantiate Tabulator when element is mounted
        this.tabulator = new Tabulator(this.$refs.table, {
          data: this.location,
          layout:"fitDataStretch",   
          movableColumns:true,
          addRowPos:"bottom",
           // link data to table
          columns: [
            {title: 'Code', field: 'code', sorter: 'string',width: 100,  editor: 'input' , validator: "required"},
            {title: 'Name', field: 'name', sorter: 'string', width: 200 , validator: "required",editor:"autocomplete", editorParams:{allowEmpty:true, showListOnEmpty:true, values:true}},
            {title: 'Under', field: 'under', sorter: 'string', width: 200,  editor: 'input' , validator: "required"},
            {title: 'Status', field: 'status', sorter: 'string',width: 100,  editor: 'input' , validator: "required"},
            {title: 'Description', field: 'description', sorter: 'string', width: 200,  editor: 'input' , validator: "required"},
            {title: 'Depth', field: 'depth', sorter: 'string', width: 100,  editor: 'input' , validator: "required"}

          ]
        });


      },

    }
    </script>
<style scoped>

</style>
...