如何拿到element plus中虚拟树组件的虚拟列表的dom？

Question

element+ 组件库的虚拟树，
我想进行拿到虚拟列表的dom，做一个向下滚动到底，然后往数据里面塞数据的功能，类似于加载更多，
我想拿到这个节点

但我发现我在onMounted的生命周期内拿不到 虚拟列表的dom

<template>
  <div>button</div>
  <el-button>1212</el-button>
  <el-tree-v2
    style="width:200px"
    :data="data"
    :props="props"
    :height="208" />
</template>
<script lang="ts" setup>
import { onMounted, nextTick } from 'vue';

interface Tree {
  id: string
  label: string
  children?: Tree[]
}
onMounted(async() => {
  await nextTick();
  let dom = document.querySelector('.el-tree-virtual-list');
  console.log('dom: ', dom);

});
const getKey = (prefix: string, id: number) => {
  return `${prefix}-${id}`;
};

const createData = (
  maxDeep: number,
  maxChildren: number,
  minNodesNumber: number,
  deep = 1,
  key = 'node'
): Tree[] => {
  let id = 0;
  return Array.from({ length: minNodesNumber })
    .fill(deep)
    .map(() => {
      const childrenNumber =
        deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);
      const nodeKey = getKey(key, ++id);
      return {
        id: nodeKey,
        label: nodeKey,
        children: childrenNumber
          ? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
          : undefined,
      };
    });
};

const props = {
  value: 'id',
  label: 'label',
  children: 'children',
};
const data = createData(4, 30, 40);
</script>

Answer 1

等视图加载完成可以拿到

import { nextTick, onMounted } from 'vue'
onMounted(async () => {
  await nextTick()
  console.log(document.querySelector('.el-tree-virtual-list'), 'virtual-list')
})

Answer 2

vue3 的更新已经是默认微任务，可以尝试在宏任务里面获取。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。