Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

有的节点空白 发现"transform:translateY(-9999px); #36

Closed
hbtj1759 opened this issue Jul 18, 2023 · 8 comments
Closed

有的节点空白 发现"transform:translateY(-9999px); #36

hbtj1759 opened this issue Jul 18, 2023 · 8 comments

Comments

@hbtj1759
Copy link

No description provided.

@wchbrad
Copy link
Owner

wchbrad commented Jul 18, 2023

麻烦贴一个最小可重现代码

@GGBeng1
Copy link

GGBeng1 commented Jul 18, 2023

同样的问题,有的时候会出现有的时候是好的,我找一下问题,再贴一下代码

@GGBeng1
Copy link

GGBeng1 commented Jul 18, 2023

应该是vue-virtual-scroller的bug, 试试升级一下

@wchbrad
Copy link
Owner

wchbrad commented Jul 20, 2023

应该是vue-virtual-scroller的bug, 试试升级一下

我需要评估一下,也许暂时不能升级,vue-virtual-scroller的~v1.1版本有缺陷,不能使用滚动到某个item的功能,升级会影响到现有其他此包的开发人员
能提供最小可重现代码最好,谢谢

@rylwl
Copy link

rylwl commented Jul 26, 2023

应该是vue-virtual-scroller的bug, 试试升级一下

我需要评估一下,也许暂时不能升级,vue-virtual-scroller的~v1.1版本有缺陷,不能使用滚动到某个item的功能,升级会影响到现有其他此包的开发人员 能提供最小可重现代码最好,谢谢

我试了一下发现就算是用你文档中提供的示例也会有这个问题,就是滚动之后会出现transform:translateY(-9999px)的空节点

<template>
  <div class="ve-tree" style="height: calc(100vh - 20px)">
    <!-- 不使用虚拟滚动时只需去掉height参数即可 -->
    <vue-easy-tree
      ref="veTree"
      node-key="id"
      height="calc(100vh - 20px)"
      :data="treeData"
      :props="props"
    ></vue-easy-tree>
  </div>
</template>

<script>
import vueEasyTree from "@wchbrad/vue-easy-tree";
export default {
  components: {
    vueEasyTree,
  },
  data() {
    return {
      props: {
        label: "name",
        children: "children",
      },
      treeData: [],
    };
  },
  created() {
    const data = [],
      root = 8,
      children = 3,
      base = 1000;
    for (let i = 0; i < root; i++) {
      data.push({
        id: `${i}`,
        name: `test-${i}`,
        children: [],
      });
      for (let j = 0; j < children; j++) {
        data[i].children.push({
          id: `${i}-${j}`,
          name: `test-${i}-${j}`,
          children: [],
        });
        for (let k = 0; k < base; k++) {
          data[i].children[j].children.push({
            id: `${i}-${j}-${k}`,
            name: `test-${i}-${j}-${k}`,
          });
        }
      }
    }
    this.treeData = data;
  },
};
</script>

image

@wchbrad
Copy link
Owner

wchbrad commented Jul 26, 2023

应该是vue-virtual-scroller的bug, 试试升级一下

我需要评估一下,也许暂时不能升级,vue-virtual-scroller的~v1.1版本有缺陷,不能使用滚动到某个item的功能,升级会影响到现有其他此包的开发人员 能提供最小可重现代码最好,谢谢

我试了一下发现就算是用你文档中提供的示例也会有这个问题,就是滚动之后会出现transform:translateY(-9999px)的空节点

<template>
  <div class="ve-tree" style="height: calc(100vh - 20px)">
    <!-- 不使用虚拟滚动时只需去掉height参数即可 -->
    <vue-easy-tree
      ref="veTree"
      node-key="id"
      height="calc(100vh - 20px)"
      :data="treeData"
      :props="props"
    ></vue-easy-tree>
  </div>
</template>

<script>
import vueEasyTree from "@wchbrad/vue-easy-tree";
export default {
  components: {
    vueEasyTree,
  },
  data() {
    return {
      props: {
        label: "name",
        children: "children",
      },
      treeData: [],
    };
  },
  created() {
    const data = [],
      root = 8,
      children = 3,
      base = 1000;
    for (let i = 0; i < root; i++) {
      data.push({
        id: `${i}`,
        name: `test-${i}`,
        children: [],
      });
      for (let j = 0; j < children; j++) {
        data[i].children.push({
          id: `${i}-${j}`,
          name: `test-${i}-${j}`,
          children: [],
        });
        for (let k = 0; k < base; k++) {
          data[i].children[j].children.push({
            id: `${i}-${j}-${k}`,
            name: `test-${i}-${j}-${k}`,
          });
        }
      }
    }
    this.treeData = data;
  },
};
</script>

image

页面展示上会有空白节点么?如果如果没有的话这个是正常的,transform:translateY(-9999px)的空dom是为了快速重用dom,增加大数据量下的性能

@rylwl
Copy link

rylwl commented Jul 26, 2023

页面展示上会有空白节点么?如果如果没有的话这个是正常的,transform:translateY(-9999px)的空dom是为了快速重用dom,增加大数据量下的性能

image
image

是不会显示,但是貌似如果不停地滚动以及切换树的折叠状态,滚动这样,这个好像一直在增长??(看上去)(只有部分能够被回收?看上去)

@wchbrad
Copy link
Owner

wchbrad commented Sep 15, 2023

不会的,最终并不会产生性能问题,如果有可重现的导致低性能的案例,请贴下,谢谢

@wchbrad wchbrad closed this as completed Sep 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants