vue.js – 以handontable更新内容数据的问题

我正在尝试实施指导.根据我的要求,我想通过更改下拉列值来重新呈现动手,但是在下拉选择中,动手不会正确更新.以下是我的代码：

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'}
          ],rowHeaders: true,dropdownMenu: true,filters: 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>

使用上面的代码,我的数据从服务器成功接收,但我无法以handontable更新数据,如以下屏幕截图所示：

如何在下拉选择后正确呈现表格？

解决方法

我看到两个问题：

> handsontable似乎无法处理动态设置(请参阅console errors),因此设置不应是计算属性.由于唯一需要更新的设置属性是settings.data,因此应该突变该属性(即,不要重置设置值).

要解决此问题,请将设置移动到data()中,将settings.data初始化为null,以便它仍然是被动的：

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

> getSelectApp是一个错误异步的计算属性(即,在这种情况下,它将获取数据并稍后处理响应).计算属性不能是异步的,因此这个计算属性实际上返回undefined.虽然在计算属性中有一个返回调用,但返回不会设置计算属性的值,因为它在Promise callback内：

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

另请注意来自this.provisioningApp = response的side effect.在任何情况下,此代码中都不需要this.provisionApp,因此应将其作为清理删除.

这个计算属性的意图似乎是根据所选选项的值更新settings.data.要实现这一点,您必须在selectedOption上使用watcher,这将更改settings.data.

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

demo