Проблема с обновлением данных содержимого в handsontable - PullRequest
Новая
       21

Проблема с обновлением данных содержимого в handsontable

0 голосов
/ 18 октября 2018

Я пытаюсь реализовать handsontable.В соответствии с моим требованием, я хочу повторно визуализировать handsontable после изменения значения раскрывающегося списка, но при выборе раскрывающегося списка handsontable не обновляется должным образом.Ниже мой код:

Handsontable.vue: 

<template>
  <div id="hot-preview">
    <HotTable :settings="settings" :ref="referenceId"></HotTable>
    <div></div>
  </div>
</template>

<script>
import { HotTable } from '@handsontable-pro/vue';

export default {
  components: {
    HotTable
  },
  props: ['settings', 'referenceId'],
}
</script>

<style>
#hot-preview {
  max-width: 1050px;
  height: 400px;
  overflow: hidden;
}
</style>

Родительский компонент : 

<template>
  <div id="provisioning-app">
    <v-container grid-list-xl fluid>
      <v-select
          :items="selectList"
          item-text="elementName"
          item-value="elementName"
          label="Standard"
          v-model="selected"></v-select>
        <handsontable :settings.sync="settings" :referenceId="referenceId"></handsontable>
     </v-container>
  </div>
</template>

<script>
import Handsontable from '@/components/Handsontable';
import PrevisioningService from '@/services/api/PrevisioningService';

export default {
  components: {
    Handsontable
  },
  data: () => ({
    selectList: [],
    selectApp: [],
    selectedOption: '',
    referenceId: 'provision-table',
  }),

  created(){
    PrevisioningService.getProvisioningList(this.$session.get('userId'), this.$session.get('customerId')).then(response => {
      this.provisioningList = response;
    });
  },

  beforeUpdate() {
    this.provisioningApp = this.getProvisioningAppList;
  },
  computed: {
    settings () {
      return {
          data: this.getSelectApp,
          colHeaders: ["Data Uploaded on", "Duration in Minutes", "Start Time", "Shift","Description","Next Day Spill Over", "Site Name"],
          columns: [
            {type: 'text'},
            {type: 'text'},
            {type: 'text'},
            {type: 'text'},
            {type: 'text'},
            {type: 'text'},
            {type: 'text'}
          ],
          rowHeaders: true,
          dropdownMenu: true,
          filters: true,
          rowHeaders: true,
          search: true,
          columnSorting: true,
          manualRowMove: true,
          manualColumnMove: true,
          contextMenu: true,
          afterChange: function (change, source) {
            alert("after change");
          },
          beforeUpdate: function (change, source) {
            alert("before update");
          }
        }
    },

    getSelectApp () {
      if(this.selectedOption !== undefined && this.selectedOption !== null && this.selectedOption !== ''){
        PrevisioningService.getProvisioningAppList(this.selectedOption, this.$session.get('userId'), this.$session.get('customerId')).then(response => {
          this.provisioningApp = response;
          return this.provisioningApp;
        });
      }
    }
  },
  method: {
    getSelected () {
      return this.selectedOption;
    }
  }
};
</script>

СПриведенный выше код, мои данные успешно получены с сервера, но я не могу обновить данные в handsontable, как показано на следующих снимках экрана:

Here how to show Handsontable when No any value selected on drop-down

And 2nd image show how the table looks after change dropdown value

Как правильно отобразить таблицу после выпадающего списка?

1 Ответ

0 голосов
/ 24 октября 2018

Я вижу две проблемы:

  • handsontable, кажется, не обрабатывает динамические settings (см. ошибки консоли ), поэтому settings не должно бытьвычисляемое свойство.Поскольку единственное свойство настроек, которое необходимо обновить, - это settings.data, только это свойство должно быть изменено (т. Е. Не сбрасывать значение settings).

    Чтобы устранить эту проблему, переместите settingsв data(), инициализируя settings.data в null так, чтобы он все еще был реактивным: 

    data() {
  settings: {
    data: null,
    colHeaders: [...],
    ...
  }
},
computed: {
  // settings() { }  // DELETE THIS
}

  • getSelectApp - это вычисляемое свойство, которое неправильно асинхронно (т. е.в этом случае он выбирает данные и обрабатывает ответ позже).Вычисляемое свойство не может быть асинхронным, поэтому это вычисленное свойство фактически возвращает undefined.Хотя внутри вычисляемого свойства есть вызов return, возвращаемое значение не устанавливает значение вычисляемого свойства, поскольку оно находится внутри Promise обратного вызова : 

    PrevisioningService.getProvisioningAppList(/*...*/).then(response => {
  this.provisioningApp = response;
  return this.provisioningApp; // DOES NOT SET COMPUTED PROPERTY VALUE
});

    Также обратите внимание побочный эффект от this.provisioningApp = response.Похоже, this.provisionApp не требуется в этом коде в любом случае, поэтому его следует удалить для очистки.

    Кажется, целью этого вычисленного свойства является обновление settings.data на основезначение выбранной опции.Для этого вам понадобится watcher на selectedOption, который изменит settings.data. 

    watch: {
  selectedOption(val) {
    PrevisioningService.getProvisioningAppList(/*...*/).then(response => {
      this.settings.data = response;
    });
  }
},

demo

...