xiaocheng555 / el-table-virtual-scroll

基于Element-UI的Table 组件开发的虚拟滚动组件,支持动态高度,解决数据量大时滚动卡顿的问题。
224 stars 41 forks source link

表格隐藏状态下更新绑定数组长度,显示后滚动条位置异常 #67

Closed vjguo closed 7 months ago

vjguo commented 7 months ago

表格显示时,unshift一条数据,表格视口显示的第一条数据不会变。表格隐藏时,unshift一条数据,切换成显示后,表格视口第一条数据变了。

xiaocheng555 commented 7 months ago

1.1.4 修复了

vjguo commented 7 months ago

1.1.4行为变为 显示和不显示 unshift一条数据 滚动条位置不变 看到的数据位置变了。 虽然跟我之前预想的不一样(我之前以为是会把隐藏的行为变成和显示一样,现在是显示的行为变得和隐藏一样),但显示和隐藏行为是统一了的,就是会导致旧代码需要修改。如果认为现在这样的行为没问题,我就修改一下旧代码。

vjguo commented 7 months ago

我明天测试下原生滚动条是什么行为

xiaocheng555 commented 7 months ago

1.1.4行为变为 显示和不显示 unshift一条数据 滚动条位置不变 看到的数据位置变了。 虽然跟我之前预想的不一样(我之前以为是会把隐藏的行为变成和显示一样,现在是显示的行为变得和隐藏一样),但显示和隐藏行为是统一了的,就是会导致旧代码需要修改。如果认为现在这样的行为没问题,我就修改一下旧代码。

往前插入内容,浏览器是会保持滚动位置不变的

vjguo commented 7 months ago

1.1.4行为变为 显示和不显示 unshift一条数据 滚动条位置不变 看到的数据位置变了。 虽然跟我之前预想的不一样(我之前以为是会把隐藏的行为变成和显示一样,现在是显示的行为变得和隐藏一样),但显示和隐藏行为是统一了的,就是会导致旧代码需要修改。如果认为现在这样的行为没问题,我就修改一下旧代码。

往前插入内容,浏览器是会保持滚动位置不变的

那我觉得现在这样没问题。

vjguo commented 7 months ago

1.1.4行为变为 显示和不显示 unshift一条数据 滚动条位置不变 看到的数据位置变了。 虽然跟我之前预想的不一样(我之前以为是会把隐藏的行为变成和显示一样,现在是显示的行为变得和隐藏一样),但显示和隐藏行为是统一了的,就是会导致旧代码需要修改。如果认为现在这样的行为没问题,我就修改一下旧代码。

往前插入内容,浏览器是会保持滚动位置不变的

现在还有一个问题。我需要动态插入数据后保持视口内内容不变,所以我会手动设置下滚动条位置,比如scrollTo(oldScrollTop + (itemSize * unshiftedLength)),这个在表格vshow true的时候好使,false的时候就不好使了,显示和隐藏行为不一样。

xiaocheng555 commented 7 months ago

1.1.4行为变为 显示和不显示 unshift一条数据 滚动条位置不变 看到的数据位置变了。 虽然跟我之前预想的不一样(我之前以为是会把隐藏的行为变成和显示一样,现在是显示的行为变得和隐藏一样),但显示和隐藏行为是统一了的,就是会导致旧代码需要修改。如果认为现在这样的行为没问题,我就修改一下旧代码。

往前插入内容,浏览器是会保持滚动位置不变的

现在还有一个问题。我需要动态插入数据后保持视口内内容不变,所以我会手动设置下滚动条位置,比如scrollTo(oldScrollTop + (itemSize * unshiftedLength)),这个在表格vshow true的时候好使,false的时候就不好使了,显示和隐藏行为不一样。

v-show 为false的时候,el-table高度为0了,设置滚动位置是无效的,你可以传给 virtual-scroll组件this.$refs.virtualScroll.scrollPos[0] = xxx,scrollPos[0] 是y轴滚动,[1]是x轴滚动

vjguo commented 7 months ago

1.1.4行为变为 显示和不显示 unshift一条数据 滚动条位置不变 看到的数据位置变了。 虽然跟我之前预想的不一样(我之前以为是会把隐藏的行为变成和显示一样,现在是显示的行为变得和隐藏一样),但显示和隐藏行为是统一了的,就是会导致旧代码需要修改。如果认为现在这样的行为没问题,我就修改一下旧代码。

往前插入内容,浏览器是会保持滚动位置不变的

现在还有一个问题。我需要动态插入数据后保持视口内内容不变,所以我会手动设置下滚动条位置,比如scrollTo(oldScrollTop + (itemSize * unshiftedLength)),这个在表格vshow true的时候好使,false的时候就不好使了,显示和隐藏行为不一样。

v-show 为false的时候,el-table高度为0了,设置滚动位置是无效的,你可以传给 virtual-scroll组件this.$refs.virtualScroll.scrollPos[0] = xxx,scrollPos[0] 是y轴滚动,[1]是x轴滚动

好的 我试一下。但比较希望能内部判断一下是否是隐藏时候调用的scrollTop,一个是因为这种设置方法不是调用的公开api,另外一点是开发者虽然是隐藏时候调用,但目的是明确的,而组件也恰好能做到。

vjguo commented 7 months ago

1.1.4行为变为 显示和不显示 unshift一条数据 滚动条位置不变 看到的数据位置变了。 虽然跟我之前预想的不一样(我之前以为是会把隐藏的行为变成和显示一样,现在是显示的行为变得和隐藏一样),但显示和隐藏行为是统一了的,就是会导致旧代码需要修改。如果认为现在这样的行为没问题,我就修改一下旧代码。

往前插入内容,浏览器是会保持滚动位置不变的

现在还有一个问题。我需要动态插入数据后保持视口内内容不变,所以我会手动设置下滚动条位置,比如scrollTo(oldScrollTop + (itemSize * unshiftedLength)),这个在表格vshow true的时候好使,false的时候就不好使了,显示和隐藏行为不一样。

v-show 为false的时候,el-table高度为0了,设置滚动位置是无效的,你可以传给 virtual-scroll组件this.$refs.virtualScroll.scrollPos[0] = xxx,scrollPos[0] 是y轴滚动,[1]是x轴滚动

好的 我试一下。但比较希望能内部判断一下是否是隐藏时候调用的scrollTop,一个是因为这种设置方法不是调用的公开api,另外一点是开发者虽然是隐藏时候调用,但目的是明确的,而组件也恰好能做到。

先无视吧,我api传参有问题。