记录下element-plus的[el-tree] 懒加载的实现

记录

• 这边主要记录下实现api & 方法, 省的下次在找。。
• 1、拖动
• 2、懒加载
• 3、实现树的局部curd

基本配置

这里面的属性官方基本都能找到，我这边只介绍几个

<el-tree
    ref="treeRef"
    class="meta-data-tree"
    accordion
    :props="defaultTreeProps"
    :load="loadNode"
    node-key="objectId"
    :highlight-current="!multiple"
    @node-click="handleNodeClick"
    lazy
    :allow-drop="allowDrop"
    :allow-drag="allowDrag"
    @node-drag-end="nodeDragEnd"
    :filter-node-method="filterNode"
    draggable
>

CURD的实现

1、效果

2、流程

拿到节点属性后， 请求后端接口 对树做相应的curd

3、新建

treeRef 是树的实例

// 注意： 此node包含id， 创建后让后端返回此node
treeRef!.value!.append(node, node.id); 

4、更新

const curNode = treeRef!.value!.getNode(node.id);
// 直接修改curNode的属性就行

5、删除

treeRef!.value!.remove(node);

node拖拽的实现

1、效果

2、实现

• :allow-drop="allowDrop" - 是否同意节点到目标位置的操作
• :allow-drag="allowDrag" - 当前节点是否可以拖动操作
• @node-drag-end="nodeDragEnd" - 拖动完毕的钩子函数

具体介绍下nodeDragEnd

这边就需要后端配合操作数据了。
判断是移动到某个node前后 / 判断是移动到某个node内部 (就这两种情况)

/**
 * @param node 拖动的node
 * @param targetNode 目标node
 * @param position = before、after、inner
 */
const nodeDragEnd = (node: any, targetNode: any, position: any, event: any) => {
  console.log("拖动的node", node);
  console.log("目标node", targetNode);
  console.log("操作", position);
  console.log("----");
  // 执行接口， 入参跟上面分析的一样
  changeDir({
    nodeId: node.id,
    targetNodeId: targetNode.id,
    dragType: position
  })
    .then((res: any) => {
      ElMessage.success("操作成功~");
    })
    .catch(err => {
      ElMessage.error("操作失败~");
    })
    .finally(() => {
      // getTreeData(); // 无论失败成功都刷新
    });
};

树的遍历

interface TreeNode {
  modelId: string;
  modelFieldId: string;
  relationModelId: number;
  relationModelFieldId: string;
  relationDesc: string;
  name: string;
  id: number | null;
  childList: TreeNode[];
}

function traverseTree(node: TreeNode, callback: (node: TreeNode) => void) {
  // 处理当前节点
  callback(node);

  // 递归处理子节点
  if (node.childList && node.childList.length > 0) {
    node.childList.forEach(child => traverseTree(child, callback));
  }
}

// 示例树
const treeData: TreeNode = {
  modelId: "",
  modelFieldId: "",
  relationModelId: 53,
  relationModelFieldId: "",
  relationDesc: "",
  name: "test2",
  id: 53,
  childList: [
    {
      modelId: "",
      modelFieldId: "",
      relationModelId: 54,
      relationModelFieldId: "",
      relationDesc: "",
      name: "child1",
      id: 54,
      childList: []
    },
    {
      modelId: "",
      modelFieldId: "",
      relationModelId: 55,
      relationModelFieldId: "",
      relationDesc: "",
      name: "child2",
      id: 55,
      childList: []
    }
  ]
};

// 使用遍历函数
traverseTree(treeData, node => {
  console.log("遍历到节点:", node.name);
});