el-tree-v2渲染树形大数据并设置默认睁开

el-tree-v2无 el-tree中默认睁开节点的属性，需要自行设置

default-expand-all

是否默认睁开所有节点

需求：首次默认睁开全部节点

实现1实验失败：增加设置了属性 :default-expand-keys="props.treeData.map(item=item.id)"无效，但是静态数据:default-expand-keys="[1]"指定id就可以睁开，缘故原由应该是数据视图更新导致，但是未找到好的解决方法。
如下实现：
1-设置了firstExpand为首次加载标记
2-判断为第一次加载，是就setExpandedKeys设置默认睁开

1. <script lang="ts" setup>
2.   import {  ElTree } from "element-plus";
3.   import { ref, watch, onMounted, nextTick } from "vue";
4. //动态设置的高度
5.   const { tableBox, tableHeight } = useDynamicTableHeight();
7.   const defaultProps = {
8.     children: 'peopleData',
9.     value: 'id'
10.   }
11.   // 传给父组件点击事件
12.   const emits = defineEmits(['clickMapTerminal']);
13.   // 点击
14.   const onClickMapTerminal = (data) => {
15.   
16.   }
17.   const props = defineProps({
18.     treeData: {
19.       type: Array,
20.       default: () => {
21.         return []
22.       }
23.     }
24.   })
25.   const treeRef = ref < InstanceType < typeof ElTree >> ();
26.   //第一次加载标记
27.   const firstExpand = ref < boolean > (true);
28.   //监听第一次加载就默认展开全部节点
29.   watch(() => props.terminalData, () => {
30.     if (!firstExpand.value) return;
31.     setExpandedKeys();
32.     firstExpand.value = false;
33.   }, { deep: true })
34.   //默认全部展开——设置当前展开的节点
35.   const setExpandedKeys = () => {
36.     const allChooseIds = props.treeData.map(item => item.id) || [];
37.     treeRef.value?.setExpandedKeys(allChooseIds);
38.   }
39. </script>
41. <template>
42.   <div id="list" class="overflow-y-auto h-full">
43.     <el-scrollbar class="w-full flex-1 h-full border-[1px] grow border-[#F0F0F0]" ref="tableBox">
44.       <el-tree-v2 ref="treeRef" :height="tableHeight" :data="props.treeData" :props="defaultProps" node-key="id" :expand-on-click-node="true" :item-size="45" default-expand-all @node-click="onClickMapTerminal">
45.         <template #default="{ node, data }">
46.         
47.         </template>
48.       </el-tree-v2>
49.     </el-scrollbar>
50.   </div>
51. </template>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。