el-tree 自定义样式

可以通过 scoped slot 来自定义 el-tree 的样式。具体来说，可以使用 el-tree 的 node-template 和 default-slot 来自定义节点的样式。其中，node-template 可以用来自定义节点的内容，default-slot 可以用来自定义节点的前缀和后缀。

例如，下面的代码演示了如何使用 node-template 来自定义节点的内容：

<el-tree :data="data">
  <template v-slot="{ node }">
    <span :class="{ 'is-leaf': node.leaf }">{{ node.label }}</span>
    <el-button v-if="!node.leaf" type="text" size="mini">展开</el-button>
  </template>
</el-tree>

在上面的代码中，我们使用了 node-template 来自定义节点的内容。具体来说，我们在 template 标签中使用了 v-slot 指令，并将其绑定到一个对象上。这个对象包含一个名为 node 的属性，它表示当前节点的数据。然后，我们在 template 标签中使用了两个元素来渲染节点的内容：一个 span 元素用来显示节点的文本，另一个 el-button 元素用来显示“展开”按钮（如果当前节点不是叶子节点）。

除了 node-template，我们还可以使用 default-slot 来自定义节点的前缀和后缀。例如，下面的代码演示了如何使用 default-slot 来添加一个图标作为节点的前缀：

<el-tree :data="data">
  <template v-slot="{ node }">
    <span>{{ node.label }}</span>
  </template>
  <template v-slot:default="{ node }">
    <i class="el-icon-folder" v-if="!node.leaf"></i>
    <i class="el-icon-document" v-else></i>
  </template>
</el-tree>

在上面的代码中，我们使用了 default-slot 来自定义节点的前缀。具体来说，我们在 template 标签中使用了 v-slot 指令，并将其绑定到一个对象上。这个对象包含一个名为 node 的属性，它表示当前节点的数据。然后，我们在 template 标签中使用了两个 i 元素来渲染节点的前缀：一个 el-icon-folder 元素用来显示文件夹图标（如果当前节点不是叶子节点），另一个 el-icon-document 元素用来显示文档图标（如果当前节点是叶子节点）。