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>

相关推荐

  1. el-tree-v2渲染树形数据设置默认展开

    2024-03-31 18:22:02       41 阅读
  2. vue2 el-tree树形下拉框

    2024-03-31 18:22:02       26 阅读
  3. el-tree 树形控件

    2024-03-31 18:22:02       42 阅读
  4. el-tree 后端返回的树形结构重命名数据循环

    2024-03-31 18:22:02       32 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-31 18:22:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-31 18:22:02       100 阅读
  3. 在Django里面运行非项目文件

    2024-03-31 18:22:02       82 阅读
  4. Python语言-面向对象

    2024-03-31 18:22:02       91 阅读

热门阅读

  1. leetcode 63.不同路径II

    2024-03-31 18:22:02       43 阅读
  2. Node.js常用命令

    2024-03-31 18:22:02       41 阅读
  3. 高防IP是怎样抵御攻击的?

    2024-03-31 18:22:02       37 阅读
  4. 让Android应用活起来: Retrofit 和 OkHttp的比较参考

    2024-03-31 18:22:02       42 阅读
  5. ZooKeeper 宕机如何应对

    2024-03-31 18:22:02       43 阅读
  6. Gitea的简单介绍

    2024-03-31 18:22:02       36 阅读
  7. P8709 [蓝桥杯 2020 省 A1] 超级胶水

    2024-03-31 18:22:02       39 阅读
  8. zookeeper--ACL详解

    2024-03-31 18:22:02       40 阅读
  9. perl:字符串模糊匹配,计算 edit 距离

    2024-03-31 18:22:02       37 阅读
  10. linux 系列文章目录 - 打包压缩命令之tar命令

    2024-03-31 18:22:02       39 阅读
  11. OSPF与静态路由配置实验介绍

    2024-03-31 18:22:02       39 阅读
  12. 二叉树的遍历C语言

    2024-03-31 18:22:02       46 阅读