<el-tree
          :expand-on-click-node="false"
          highlight-current
          :data="treeData"
          ref="treeRef"
          node-key="id"
          lazy
          :props="defaultProps"
          :load="loadNode"
          :check-on-click-node="true"
          :current-node-key="currentNodeKey"
          @current-change="currentNodeChange"
        >
          <template #default="{ node, data }">
            <div class="custom-tree-node tw-flex tw-items-center">
              <!-- <el-tooltip :content="node.label" placement="bottom" effect="light"> -->
              <!-- <div class="node-label ellipsis">{{ node.label }}</div> -->
              <div class="node-label">{{ node.label }}</div>
              <!-- </el-tooltip> -->
              <div class="tools-tree">
                <el-button v-permission="'add'" v-if="data.level < 5" size="small" @click="addStreetFn(data)"
                  >+</el-button
                >
                <el-button v-permission="'edit'" size="small" @click="editStreetFn(data)" type="primary" icon="Edit" />
                <el-button
                  v-permission="'delete'"
                  size="small"
                  @click="deleteStreetFn(data, 1)"
                  type="success"
                  icon="Delete"
                />
              </div>
            </div>
          </template>
        </el-tree>
        

主要js

const loadNode = async (node, resolve) => {
  if (node.level == 0) {
    const { data } = await treeList({ bottomRegionLevel: 1 })
    return resolve(data)
  }
  if (node.level >= 1 && node.level < 5) {
    const params = {
      bottomRegionLevel: node.level + 1,
      id: node.data.id
    }
    const { data } = await treeList(params)
    return resolve(data)
  }
  if (node.level == 5) {
    return resolve([])
  }
}

// 局部更新树结构
const refreshTreeNode = (unid) => {
  const node = treeRef.value.getNode(unid)
  if (node) {
    node.loaded = false //告诉组件这个节点需要加载
    node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点
  }
}