element ui中tree的使用

目的：实现一个可以在一级目录展示图标，然后二级目录有点击事件的树

使用element ui中的tree组件。

关键点在于<template slot-scope="{node, data}">来展示图标，

 @node-click="(obj, node, element) => click(obj, node, element)"来完成点击事件。

 

首先解释一下，插槽中的作用域含义，node是当前树节点对象，data是当前节点的数据

而点击函数中三个参数，obj是当前节点的数据对象，node是当前树节点对象，element是节点对象

 

<template slot-scope="{node, data}">
          <div class="label">
            <i v-if="data.icon === 'user'" class="el-icon-user" />
            <span v-if="data.icon === 'user'">user</span>
            <span :class="data.id">{{ node.label }},node:{{ node.level }},data:{{ data.id }}</span>
          </div>
        </template>

 // 节点单机
    click(obj, node, element) {
      console.log('obj', obj)
      console.log('node', node)
      console.log('element', element)
      if (!obj?.children) {
        this.dialogTitle = obj.label
        this.dialogVisible = true
      }
    }