el-tree slot-scope参数

el-tree组件是Element UI中的一个树形控件，可以用于展示树形结构的数据。slot-scope是Vue.js中的一个特殊属性，用于在父组件中访问子组件的数据。在el-tree中，slot-scope可以用于访问树形节点的数据和节点的状态。具体来说，el-tree的每个节点都有一个data属性，用于存储节点的数据，例如节点的id、label、icon等。而节点的状态则包括是否被选中、是否展开等。通过slot-scope，我们可以在父组件中访问这些数据和状态，从而实现自定义节点的样式和行为。

下面是一个el-tree的例子，演示了如何使用slot-scope来自定义节点的样式和行为：

<template>
  <el-tree :data="treeData" :props="defaultProps" node-key="id">
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <i :class="data.icon"></i>
      {{ data.label }}
      <el-button v-if="node.level === 0" @click="handleAddChild(node)">添加子节点</el-button>
    </span>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '一级 1',
          icon: 'el-icon-folder',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              icon: 'el-icon-folder',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1',
                  icon: 'el-icon-folder'
                },
                {
                  id: 10,
                  label: '三级 1-1-2',
                  icon: 'el-icon-folder'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          icon: 'el-icon-folder',
          children: [
            {
              id: 5,
              label: '二级 2-1',
              icon: 'el-icon-folder'
            },
            {
              id: 6,
              label: '二级 2-2',
              icon: 'el-icon-folder'
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleAddChild(node) {
      const newChild = { id: Date.now(), label: '新节点', icon: 'el-icon-folder' }
      this.$set(node, 'children', node.children || [])
      node.children.push(newChild)
    }
  }
}
</script>

在上面的例子中，我们使用了slot-scope来访问节点的数据和状态。具体来说，我们在span标签上使用了slot-scope="{ node, data }"，这样就可以在父组件中访问节点的数据和状态。在span标签中，我们使用了data.icon来显示节点的图标，使用data.label来显示节点的文本。同时，我们还根据节点的层级来显示添加子节点的按钮，这样可以让用户方便地添加新的节点。