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