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设置默认展开

<script lang="ts" setup>
  import {  ElTree } from "element-plus";
  import { ref, watch, onMounted, nextTick } from "vue";
 //动态设置的高度
  const { tableBox, tableHeight } = useDynamicTableHeight();

  const defaultProps = {
    children: 'peopleData',
    value: 'id'
  }
  // 传给父组件点击事件
  const emits = defineEmits(['clickMapTerminal']);
  // 点击
  const onClickMapTerminal = (data) => {
  
  }
  const props = defineProps({
    treeData: {
      type: Array,
      default: () => {
        return []
      }
    }
  })
  const treeRef = ref < InstanceType < typeof ElTree >> ();
  //第一次加载标记
  const firstExpand = ref < boolean > (true);
  //监听第一次加载就默认展开全部节点
  watch(() => props.terminalData, () => {
    if (!firstExpand.value) return;
    setExpandedKeys();
    firstExpand.value = false;
  }, { deep: true })
  //默认全部展开------设置当前展开的节点
  const setExpandedKeys = () => {
    const allChooseIds = props.treeData.map(item => item.id) || [];
    treeRef.value?.setExpandedKeys(allChooseIds);
  }
</script>

<template>
  <div id="list" class="overflow-y-auto h-full">
    <el-scrollbar class="w-full flex-1 h-full border-[1px] grow border-[#F0F0F0]" ref="tableBox">
      <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">
        <template #default="{ node, data }">
        
        </template>
      </el-tree-v2>
    </el-scrollbar>
  </div>
</template>
相关推荐
滚雪球~19 分钟前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语21 分钟前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport22 分钟前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg24 分钟前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全
胡西风_foxww30 分钟前
【es6复习笔记】rest参数(7)
前端·笔记·es6·参数·rest
m0_7482548831 分钟前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
星就前端叭1 小时前
【开源】一款基于Vue3 + WebRTC + Node + SRS + FFmpeg搭建的直播间项目
前端·后端·开源·webrtc
m0_748234521 小时前
前端Vue3字体优化三部曲(webFont、font-spider、spa-font-spider-webpack-plugin)
前端·webpack·node.js
Web阿成1 小时前
3.学习webpack配置 尝试打包ts文件
前端·学习·webpack·typescript
苹果醋32 小时前
Golang的文件加密工具
运维·vue.js·spring boot·nginx·课程设计