[Bug] 数据超过三百条后滚动条过半后更新数据报错没有resize

[pppyx1]

Version

e.g 1.0.0

Link to Minimal Reproduction

https://www.visactor.io/vtable/api/Methods#updateOption

Steps to Reproduce

搜索 导出 刷新

  <!-- 列表区域 -->
  <div ref="listTableRef1" class="container"></div>
</div>

<script> import waves from '@/directive/waves/index.js' import { getActiveOpenYearList } from '@/api/open-year' import { getSignByStudentRegionStatistics, getSignByStudentRegionStatisticsRefresh } from '@/api/report/school/sign-by-student-region-report' import * as VTable from '@visactor/vtable' import { downloadExcel, exportVTableToExcel } from '@visactor/vtable-export' export default { // 生源分布就业统计(学校) name: 'SchoolSignByStudentRegionStatisticsList', directives: { waves }, components: {}, filters: {}, data() { return { yearList: [], rolesList: [], // table列表加载中的控制变量 listLoading: false, // table列表中的数据列表变量 dataList: [], apiRequestUrl: this.$apiRequestUrl, list: [], total: 0, dataAuditState: undefined, dialogFormVisible: false, graduateJobYear: 0, tableInstance1: null, option1: null } }, mounted() { const nowDate = new Date() this.graduateJobYear = nowDate.getFullYear() this.getYearList() this.fetchData() }, methods: { getYearList(){ const that = this getActiveOpenYearList() .then((res) => { that.yearList = res.Data }) .catch((error) => { const status = error.code let errMsg if (status === that.$CODE.HTTP_EXCEPTION) { errMsg = '连接服务器失败，请检查网络是否正常' } else if (status === that.$CODE.NO_PERMISSION) { errMsg = '操作权限不足' } else { errMsg = '获取列表失败(错误代码：' + status + ')' } if (error) { that.$message({ message: errMsg, type: 'error', duration: 5 * 1000 }) } }) }, handleFilter() { this.fetchData() }, handleRefresh() { const that = this that.$confirm('此操作将获取最新数据，但由于数据量较大，可能比较耗时, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { const loading = that.$loading({ lock: true, text: '正在查询，请稍后...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }) getSignByStudentRegionStatisticsRefresh(that.graduateJobYear) .then((res) => { that.dataList = res.Data that.createVTable() }) .catch((error) => { const status = error.code let errMsg if (status === that.$CODE.HTTP_EXCEPTION) { errMsg = '连接服务器失败，请检查网络是否正常' } else if (status === that.$CODE.NO_PERMISSION) { errMsg = '操作权限不足' } else { errMsg = '获取列表失败(错误代码：' + status + ')' } if (error) { that.$message({ message: errMsg, type: 'error', duration: 5 * 1000 }) } }) .finally(() => { loading.close() }) }).catch(() => { that.$message({ type: 'info', message: '已取消刷新' }); }); }, /** * 获取列表 */ fetchData() { const that = this const loading = that.$loading({ lock: true, text: '正在查询，请稍后...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }) getSignByStudentRegionStatistics(this.graduateJobYear) .then((res) => { that.dataList = res.Data that.createVTable() }) .catch((error) => { const status = error.code let errMsg if (status === that.$CODE.HTTP_EXCEPTION) { errMsg = '连接服务器失败，请检查网络是否正常' } else if (status === that.$CODE.NO_PERMISSION) { errMsg = '操作权限不足' } else { errMsg = '获取列表失败(错误代码：' + status + ')' } if (error) { that.$message({ message: errMsg, type: 'error', duration: 5 * 1000 }) } }) .finally(() => { loading.close() }) }, createVTable() { const that = this const columns = [ { 'field': 'Category1', 'title': '区域', 'headerStyle': { textStick: true, textAlign: 'center' }, 'style': { textAlign: 'center' }, 'mergeCell': true, 'width': 'auto' }, { 'field': 'Category2', 'title': '地市', 'headerStyle': { textStick: true, textAlign: 'center' }, 'style': { textAlign: 'center' }, 'mergeCell': true, 'width': 'auto' }, { 'field': 'Category3', 'title': '区县', 'headerStyle': { textStick: true, textAlign: 'center' }, 'style': { textAlign: 'center' }, 'width': 'auto' }, { 'field': 'Byrs', 'title': '毕业生人数', 'headerStyle': { textStick: true, textAlign: 'center' }, 'style': { textAlign: 'center' }, 'width': 'auto' }, { 'field': 'Qyrs', 'title': '签约人数', 'headerStyle': { textStick: true, textAlign: 'center' }, 'style': { textAlign: 'center' }, 'width': 'auto' }, { 'field': 'Rate', 'title': '签约率', 'headerStyle': { textStick: true, textAlign: 'center' }, 'style': { textAlign: 'center' }, 'width': 'auto' } ] const option = { records: this.dataList, columns, widthMode: 'standard', hover: { highlightMode: 'row' }, autoFillWidth: true } that.tableInstance1 = new VTable.ListTable( that.$refs.listTableRef1, option ) }, // 导出按钮事件 handleExport: function () { const that = this const postdata = { graduateYear: that.graduateJobYear } this.$download('/sign-by-student-region-school-report/export-sign-by-student-region-excel', '生源分布就业统计.xlsx', postdata) // that.exportExcel(that.tableInstance1) }, async exportExcel(tableInstance) { const buffer = await exportVTableToExcel(tableInstance) downloadExcel(buffer, 'export-excel') } } } </script> <style lang="scss" scoped> .container { width: 100%; height: 970px; /* 设置容器的高度 */ overflow: auto; /*当内容超过容器宽度、高度时显示滚动条 */ } </style>

Current Behavior

滚动条过半后重新请求接口后组件直接崩溃了，报错

Expected Behavior

希望能修复这个bug

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[fangsmile]

可以在codesanbox上建个复现的例子。我们这边看一下.
试了下 没有复现。请具体提供个例子吧，免得来回沟通比较麻烦

[fangsmile]

@pppyx1 ?? 在吗