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

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

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

 代码段：

<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());

        },

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