el-tree内容自定义

`el-tree`是Element UI库中的一个组件，它是一个树形数据展示组件，用于呈现层级结构的数据。在默认情况下，`el-tree`提供了一些基本的功能，如节点拖拽、展开折叠等。但是，如果你需要对它的内容进行自定义，可以按照以下步骤操作：

1. **设置节点渲染函数**：`render-content`属性允许你自定义每个节点的HTML模板。你可以在这里添加自定义元素和逻辑，例如显示特定数据字段、图标或者其他UI元素。

<el-tree :data="treeData" :render-content="renderNode">
</el-tree>

<script>
function renderNode(node, data) {
  return `<span>${node.label} <i class="custom-icon-${node.type}"></i></span>`;
}
</script>

2. **使用 slot插槽**：你也可以利用内置的`default`、`expanded`、`collapsed`等slot插槽来覆盖默认的节点外观。这允许你在特定状态下的节点上放置定制的内容。

<el-tree
  :data="treeData"
  node-key="id"
  default-expand-all
  @node-click="handleNodeClick"
  :render-node="renderTreeNode"
>
</el-tree>

<template #renderTreeNode(node, data) {
  <div class="custom-node">
    <h3>{{ node.label }}</h3>
    <p v-if="node.children.length">Children: {{ node.children.length }}</p>
    <slot name="default">{{ node.content || 'Default Content' }}</slot>
  </div>
}

3. **处理节点事件**：通过`@node-click`这样的事件处理器，你可以在用户点击节点时触发自定义的行为。