liyang5945/vue-drag-gantt-chart

数据量少导致渲染问题

Closed this issue · 2 comments

数据量多的情况渲染没问题,但是数据量少 导致渲染失败

let list = mockDatas(this.rowNum, this.colNum, this.times);
let array = []
for (let i = 0; i < 20; i++) {
array.push(list[i])
}
console.log('list====>',list)
console.log('array====>',array)
this.setRawRowList(array);
this.setShowRowList(cloneDeep(array));
this.classifyData();

当arraylist的长度为1是 渲染的左右两边都是空白

test
无法复现这个bug,我把20改成5也是正常的

经过debug发现不是数量的问题,问题是sliceData() 计算高度的时候 ;
showDatas() {
const { startRenderNum, endRenderNum, datas } = this;
return datas.slice(startRenderNum, endRenderNum);
}
此处的 startRenderNum, endRenderNum, 受到sliceData() 影响
demo是全屏当页面,我实际使用是IFRAME,会导致数据被裁剪掉