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>
相关推荐
小远yyds18 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果36 分钟前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长41 分钟前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm
理想不理想v3 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试