我正在尝试实施指导.根据我的要求,我想通过更改下拉列值来重新呈现动手,但是在下拉选择中,动手不会正确更新.以下是我的代码:
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; }); } },