Handsontable 中更新内容数据的问题

Posted 2023-03-22

【中文标题】Handsontable 中更新内容数据的问题

【英文标题】：Issue with update content data in handsontable

【发布时间】：2019-03-23 15:37:58

【问题描述】：

我正在尝试实现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中的数据，如下截图所示：

下拉选择后如何正确渲染表格？

【参考方案1】：

我看到两个问题：

handsontable 似乎无法处理动态settings（请参阅console errors），因此settings 不应是计算属性。由于唯一需要更新的设置属性是 settings.data，因此该属性本身应该被改变（即，不要重置 settings 的值）。

为了解决这个问题，将settings 移动到data()，将settings.data 初始化为null，以便它仍然是响应式的：

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

getSelectApp 是一个错误的异步计算属性（即，在这种情况下，它获取数据并稍后处理响应）。计算属性不能是异步的，所以这个计算属性实际上返回undefined。虽然计算属性内部有一个return 调用，但返回不会设置计算属性的值，因为它在Promise callback 内部：

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

还要注意side effect 来自this.provisioningApp = response。在任何情况下，这段代码似乎都不需要this.provisionApp，因此应该将其作为清理工作删除。

这个计算属性的目的似乎是根据所选选项的值更新settings.data。为此，您必须在selectedOption 上使用watcher，这将更改settings.data。

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

demo