element plus 树形 tree 懒加载的树形，如何动态添加节点

电脑版发表于：2025/5/15 17:03

tn>思想思路：数据源里边是默认没有children的或者说没有走children这种结构，所以和正常的操作方法还有点不一样，所以应该使用append的方式添加而不使用children的方式添加

**代码如下：**
```
<template>
  <div class="container">
    <el-tree
      ref="treeRef"
      :data="treeData"
      :load="loadNode"
      lazy
      @node-click="handleNodeClick"
      :props="defaultProps"
      highlight-current
    ></el-tree>
    <el-row class="mt-4">
      <el-input v-model="newNodeName" placeholder="请输入节点名称" class="w-64"></el-input>
      <el-button @click="addNode" type="primary" :disabled="!currentNode">添加子节点</el-button>
    </el-row>
    <div v-if="currentNode" class="mt-4 text-gray-500">
      当前选中节点: {{ currentNode.label }} (ID: {{ currentNode.id }})
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElTree, ElInput, ElButton, ElRow } from 'element-plus'

const treeRef = ref(null)
const treeData = ref([{
  id: 1,
  label: '一级节点',
  children: [],
  leaf: false
}])
const currentNode = ref(null)
const newNodeName = ref('')

const defaultProps = {
  children: 'children',
  label: 'label'
}

const loadNode = (node, resolve) => {
  // 根节点已有初始数据
  if (node.level === 0) {
    return resolve(treeData.value)
  }
  
  // 模拟异步加载子节点
  setTimeout(() => {
    const childNodes = Array.from({ length: 2 }, (_, i) => ({
      id: `${node.data.id}-${i + 1}`,
      label: `${node.data.label}-子节点${i + 1}`,
      children: [],
      leaf: false
    }))
    resolve(childNodes)
  }, 500)
}

const handleNodeClick = (data) => {
  currentNode.value = data
}

const addNode = () => {
  if (!currentNode.value || !newNodeName.value.trim()) return
  
  const newNode = {
    id: `new-${Date.now()}`,
    label: newNodeName.value.trim(),
    children: [],
    leaf: false // 设置为非叶子节点，允许后续懒加载
  }
  
  // 使用 append 方法添加节点
  /*
  使用 append 方法添加节点,才能添加到下面去，不然使用currentNode.value.children.push(newNode)；这种方法添加默认是添加到最上面的。
  数据源里边是默认没有children的，所以和正常的操作方法还有点不一样，所以使用append的方式添加而不使用children的方式添加
  */
  treeRef.value.append(newNode, currentNode.value)
  
  // 清空输入框
  newNodeName.value = ''
  
  // 如果父节点之前被标记为叶子节点，需要更新状态
  if (currentNode.value.leaf) {
    currentNode.value.leaf = false
  }
  
  console.log('节点添加成功:', newNode)
}
</script>

<style scoped>
.container {
  max-width: 600px;
  margin: 20px auto;
}
</style>    
```

TeachingNote

element plus 树形 tree 懒加载的树形，如何动态添加节点

{{item.title}}