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

小猿L2024-03-31 13:02

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>