有的节点空白 发现"transform:translateY(-9999px); about vue-easy-tree HOT 8 CLOSED

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

from vue-easy-tree.

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

from vue-easy-tree.

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

from vue-easy-tree.

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

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

from vue-easy-tree.

应该是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>

from vue-easy-tree.

应该是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>

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

from vue-easy-tree.

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

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

from vue-easy-tree.

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

from vue-easy-tree.