el-tree插槽使用

el-tree组件提供了多个插槽，可以用来自定义树节点的展示。以下是常用的插槽及其用法：

1. default插槽：用于自定义树节点的展示。

<el-tree :data="data">
  <template slot-scope="{ node, data }">
    <span> {{ data.label }} </span>
  </template>
</el-tree>

2. append插槽：用于自定义树节点的追加按钮。

<el-tree :data="data" :expand-on-click-node="false">
  <template slot="append" slot-scope="{ node, data }">
    <el-button @click="addChild(node)">Add</el-button>
  </template>
</el-tree>

3. empty插槽：用于自定义树节点为空时的展示。

<el-tree :data="data">
  <template slot="empty">
    <span> No Data </span>
  </template>
</el-tree>

4. node-icon插槽：用于自定义树节点的图标。

<el-tree :data="data">
  <template slot-scope="{ node, data }">
    <span class="node-icon">
      <i :class="data.icon"></i> {{ data.label }}
    </span>
  </template>
  <template slot="node-icon" slot-scope="{ node }">
    <i :class="node.icon"></i>
  </template>
</el-tree>

以上是常用的几个插槽，通过使用这些插槽，我们可以自定义树节点的展示和交互方式，提高用户体验。