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>
相关推荐
晚霞的不甘21 小时前
Flutter for OpenHarmony 创意实战:打造一款炫酷的“太空舱”倒计时应用
开发语言·前端·flutter·正则表达式·前端框架·postman
这儿有一堆花1 天前
CSS 拟真光影设计:从扁平到深度的技术复盘
前端·css
_OP_CHEN1 天前
【前端开发之CSS】(三)CSS 常用元素属性宝典(上):从字体到文本,手把手教你打造高颜值网页!
前端·css·html·网页开发·文本属性·字体属性·页面美化
你脸上有BUG1 天前
【工程化】记给ant-design-vue打补丁的示例
前端·javascript·vue.js·补丁·ant-design-vue
你这个代码我看不懂1 天前
Vue子父组件.sync
javascript·vue.js·ecmascript
灰灰勇闯IT1 天前
Flutter for OpenHarmony:布局组件实战指南
前端·javascript·flutter
⑩-1 天前
Vue框架学习
前端·vue.js·学习
a程序小傲1 天前
京东Java面试被问:基于Gossip协议的最终一致性实现和收敛时间
java·开发语言·前端·数据库·python·面试·状态模式
小二·1 天前
Python Web 开发进阶实战:AI 原生应用商店 —— 在 Flask + Vue 中构建模型即服务(MaaS)与智能体分发平台
前端·人工智能·python
Devlive 开源社区1 天前
技术日报|推理RAG文档索引PageIndex登顶日增1374星,React视频工具Remotion二连冠进前二
前端·react.js·前端框架