5.20193.646版本删除的小BUG

登录

本帖最后由 eeg1412 于 2020-3-25 09:57 编辑

在5.20193.646版本中使用removeAt删除或者使用refresh刷新的时候正好介于有滚动条和没滚动条之间的时候会出现空白区域。

↑删除前

↑删除后右侧会出现空白的滚动条占位区域

↑在低版本中则没有这个现象

以下是代码：

<template>
<div class="container-fluid">
<label>
newRowAtTop
<input v-model="grid.newRowAtTop" @change="onValueChanged" type="checkbox">
</label>
<wj-flex-grid :initialized="initData"
:allowAddNew="true"
:allowDelete="true"
:itemsSource="grid.data"
:newRowAtTo="grid.newRowAtTop">
<wj-flex-grid-column binding="id" header="ID" :width="'*'"></wj-flex-grid-column>
<wj-flex-grid-column binding="country" header="国" :width="'*'"></wj-flex-grid-column>
<wj-flex-grid-column binding="downloads" header="DL数" :width="'*'"></wj-flex-grid-column>
<wj-flex-grid-column binding="sales" header="売上" :width="'*'"></wj-flex-grid-column>
<wj-flex-grid-column binding="expenses" header="費用" :width="'*'"></wj-flex-grid-column>
</wj-flex-grid>
<button type="button" @click="delRow(1)">delete</button>
</div>
</template>
<script>
import "@grapecity/wijmo.styles/wijmo.css";
import 'bootstrap.css';
import Vue from 'vue';
import '@grapecity/wijmo.vue2.core';
import '@grapecity/wijmo.vue2.grid';
let App = Vue.extend({
name: 'app',
data: function(){
return {
grid: {
data: null,
newRowAtTop: false,
instance: null
}
}
},
methods: {
getData: function(s, e){
let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (let i = 0; i < countries.length; i++) {
data.push({
id: i,
country: countries[i],
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
return data;
},
initData: function(grid){
this.grid.instance = grid;
this.grid.data = this.getData();
},
onValueChanged: function(){
this.grid.instance.newRowAtTop = this.grid.newRowAtTop;
},
delRow(n){
this.grid.instance.collectionView.removeAt(n);
},
}
})
new Vue({ render: h => h(App) }).$mount('#app');
</script>
<style>
.wj-flexgrid {
height: 200px;
margin: 10px 0;
}
body {
margin-bottom: 20pt;
}
</style>

复制代码

将以上代码黏贴至日文版的DEMO中后点击delete复现
https://demo.grapecity.com/wijmo/demos/Grid/Rows/AddingRemoving/vue

中文版的DEMO好像版本比日文版的要低所以黏贴以上代码后不会复现
https://demo.grapecity.com.cn/wijmo/demos/Grid/Rows/AddingRemoving/vue

KevinChen · KevinChen

本帖最后由 KevinChen 于 2020-3-25 14:21 编辑

您好，感谢您的反馈！问题已经重现！

初步分析是在刷新时重排flexGrid的布局时没有触发自适应的机制，如果在grid的host dom上设置固定宽高时会触发这个问题。

暂时可以利用refresh解决这个问题，关键代码如下：

<div class="blockcode"><blockquote> delRow(n){
this.grid.instance.collectionView.removeAt(n);
console.log(1);
var grid = this.grid;
setTimeout(function(){
grid.instance.refresh(true);
}, 10)
},

复制代码

在您提供的示例中，可以拷贝以下代码来查看效果：

<div class="blockcode"><blockquote><template>
<div class="container-fluid" >
<label>
newRowAtTop
<input v-model="grid.newRowAtTop" @change="onValueChanged" type="checkbox">
</label>
<wj-flex-grid :initialized="initData"
:allowAddNew="true"
:allowDelete="true"
:itemsSource="grid.data"
:newRowAtTo="grid.newRowAtTop" style="height:225px;">
<wj-flex-grid-column binding="id" header="ID" :width="'*'"></wj-flex-grid-column>
<wj-flex-grid-column binding="country" header="国" :width="'*'"></wj-flex-grid-column>
<wj-flex-grid-column binding="downloads" header="DL数" :width="'*'"></wj-flex-grid-column>
<wj-flex-grid-column binding="sales" header="売上" :width="'*'"></wj-flex-grid-column>
<wj-flex-grid-column binding="expenses" header="費用" :width="'*'"></wj-flex-grid-column>
</wj-flex-grid>
<button type="button" @click="delRow(1)">delete</button>
</div>
</template>
<script>
import "@grapecity/wijmo.styles/wijmo.css";
import 'bootstrap.css';
import Vue from 'vue';
import '@grapecity/wijmo.vue2.core';
import '@grapecity/wijmo.vue2.grid';
let App = Vue.extend({
name: 'app',
data: function(){
return {
grid: {
data: null,
newRowAtTop: false,
instance: null
}
}
},
methods: {
getData: function(s, e){
let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (let i = 0; i < countries.length; i++) {
data.push({
id: i,
country: countries[i],
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
return data;
},
initData: function(grid){
this.grid.instance = grid;
this.grid.data = this.getData();
},
onValueChanged: function(){
this.grid.instance.newRowAtTop = this.grid.newRowAtTop;
},
delRow(n){
this.grid.instance.collectionView.removeAt(n);
console.log(1);
var grid = this.grid;
setTimeout(function(){
grid.instance.refresh(true);
}, 10)
},
}
})
new Vue({ render: h => h(App) }).$mount('#app');
</script>
<style>
.wj-flexgrid {
height: 200px;
margin: 10px 0;
}
body {
margin-bottom: 20pt;
}
</style>

复制代码

eeg1412 · eeg1412

KevinChen 发表于 2020-3-25 14:19
您好，感谢您的反馈！问题已经重现！

初步分析是在刷新时重排flexGrid的布局时没有触发自适应的机制，如 ...

谢谢回复。
这样相当于界面更新了2次吧，我们这边的代码规范里是禁止使用setTimeout的，所以请尽早在未来的版本中修复这个问题。毕竟旧版本反而没有这个问题。

KevinChen · KevinChen

好的，这里确实是一个bug，已经提交给产品部门，后期修复后给您回帖反馈。

		自动登录	找回密码
密码			立即注册

[已处理] 5.20193.646版本删除的小BUG

最佳答案

3 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章