element-ui 树型控件自定义图标和实现单选节点功能

（一）自定义图标
在element-ui 官网中，提供了两种方法: render 和 slot 来添加自定义节点内容，可以在节点区添加按钮或图标等。

<el-tree ref="tree" :data="treeData" show-checkbox :check-strictly="true" node-key="code" highlight-current :props="defaultProps" @check="handleTreeCheck" @node-click="handleNodeClick">
   <span class="slot-t-node" slot-scope="{ node, data }">
        <i :class="{ 'fa fa-folder': !node.expanded, 'fa fa-folder-open':node.expanded}" style="color: #fcd568;" />
        <span>{{ node.label }}</span>
    </span>
</el-tree>

（二）实现单选节点功能

这里的单选功能，只不过设置节点时，将原来选中的节点再次覆盖，达到了单选的功能。

（1）通过 @node-click 事件（节点被点击时的回调），设置选中的节点：

    // 监听树点击事件
    handleNodeClick(data, checked, node) {
      console.log(data, checked , node)
      if (checked === true) {
        this.$emit('select-tree', data)
        this.$refs.tree.setCheckedNodes([data])
      }
    },

（2）通过 @check-change 事件（节点选中状态发生变化时的回调），设置选中的节点：

// 监听树选择事件
    handleTreeCheck(data, checked) {
      console.log(data, checked)
      this.$emit('select-tree', data)
      this.$refs.tree.setCheckedNodes([data])
    },

（3）为何调用两个事件，做相同操作：

@check-change 事件 主要是用户点击自定义图标前的选择框进行的操作，而 @node-click 事件，点击节点（包括图标和文字）进行的操作。

image.png