el-tree设置单独icon，并且子级单独设置选择框

图片可能看着不太合理，是后端在调数据，我只是抽空分享一下，最终的效果是：在有子级的情况下是图标，无子级会是选择框，层级定义上与后端数据交流好即可了，各位可以随机应变做出调整。

单独设置icon图标是通过插槽来实现的，是有固定写法形式的，如 node，data，class：custom-tree-node

 HTML代码段：

<div class="content_tree">
    <el-tree 
        :data="treeData" 
        node-key="id" 
        default-expand-all 
        :expand-on-click-node="false" 
        :props="defaultProps" 
        ref="elTreeNodeRef">
             <span class="custom-tree-node" slot-scope="{node,data}">
                <span v-if="data.list">
                    <i class="el-icon-files"></i>
                </span>
                <el-checkbox v-else v-model="node.checked"></el-checkbox>
                <span style="margin-left:5px;">
                    {{node.label}}
                </span>
             </span>
    </el-tree>
</div>

有的同学在里面刚使用插槽的时候，是因为可能吧node与data搞反了，导致的。

data.list是后端定义的，与children同义去理解就好了。这里判断是否存在子级使用的。

下面说checked：可以直接引用element组件库中的el-checkbox来用，el-tree支持refs通过getCheckedNodes方法获取选中的一个集合数组。

 <div class="titleinstructions">
    绑定设备
    <span class="btn_tagg" @click.stop="subCheckedTree">保存</span>
</div>

subCheckedTree(){

   console.log(this.$refs.elTreeNodeRef.getCheckedNodes());

},

好了，就是这样，希望可以帮助到各位！