监听el-tree滚动距离

回答: 要监听el-tree滚动距离，可以使用vue-virtual-scroll-list提供的scroll事件。在el-tree中引入vue-virtual-scroll-list后，当设置了height的时候，会启用virtual-list。你可以在virtual-list上监听scroll事件，通过获取滚动的scrollTop值来获取滚动距离。具体实现可以参考以下代码示例：

<template>
  <div>
    <vue-virtual-scroll-list
      :size="size"
      :remain="remain"
      :bench="bench"
      :data-key="'id'"
      :data-sources="treeData"
      @scroll="handleScroll"
    >
      <el-tree
        :data="treeData"
        :props="treeProps"
        ref="tree"
      ></el-tree>
    </vue-virtual-scroll-list>
  </div>
</template>

<script>
import VueVirtualScrollList from 'vue-virtual-scroll-list';

export default {
  components: {
    VueVirtualScrollList,
  },
  data() {
    return {
      size: 50, // 每个节点的高度
      remain: 10, // 预渲染的节点数
      bench: 5, // 缓冲区节点数
      treeData: [], // 树的数据
      treeProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
  methods: {
    handleScroll(scrollTop) {
      // 在这里处理滚动距离的逻辑
      console.log('滚动距离:', scrollTop);
    },
    // 其他方法...
  },
  // 其他生命周期钩子...
};
</script>

在上述代码中，我们使用了vue-virtual-scroll-list组件来实现虚拟滚动列表。通过监听其scroll事件，可以获取到滚动的scrollTop值，从而得到滚动距离。你可以在handleScroll方法中处理滚动距离的逻辑。