avue-tree实现指定级别节点显示复选框及图标

**

avue-tree实现指定级别节点显示复选框及图标

**
我的项目需求是只在最后一级节点显示复选框，其他节点显示图标。
1、指定级别显示图标的实现
查看Avue官方文档可以看到显示图标的代码

<span class="el-tree-node__label" slot-scope="{ node, data }">
   <span>
     <i :class="node.level== 1 ? 'el-icon-copy-document' : node.level== 2 ?'el-icon-coin' :''"></i>//图标
     {{ (node || {}).label }}
   </span>
</span>

通过给i标签添加v-if的判断条件可以控制图标的显示和隐藏。
在这里由于项目需求除最后一级显示复选框外，其他均显示图标，通过node.level进行层级的判断。
**

2、指定级别显示复选框

**
我们知道，在element-ui实现复选框效果，需要加上show-checkbox属性，Avue中也是如此

<avue-tree
   class="tab1" 
   ref="tree1" 
   :option="tab1TreeOption" 
   :data="tab1TreeData" 
   @check-change="checkedChange" 
   node-key="id"
   show-checkbox><!-- 显示复选框 -->
   <span class="el-tree-node__label" slot-scope="{ node }">
     <span >
      <i :class="node.level== 1 ? 'el-icon-copy-document' : node.level== 2 ?'el-icon-coin' :''">
       {{ (node || {}).label }}
     </span>
   </span>
</avue-tree>

（1）第一种，修改element-ui源码(不推荐)
由于显示复选框在element-ui源码中时通过v-if=“showcheckbox”来实现的，源码如下所示：

 <el-checkbox
        v-if="showCheckbox"
        v-model="node.checked"
        :indeterminate="node.indeterminate"
        :disabled="!!node.disabled"
        @click.native.stop
        @change="handleCheckChange"
      >
      </el-checkbox>

我们要想指定层级或节点显示复选框可通过修改v-if的显示条件，将其修改为

v-if="showCheckbox&& node.data.showCheckbox"

然后通过给节点数据添加showCheckbox的属性来控制节点的显示和隐藏。

需要注意的是：修改源码需要在node_modules中element-ui文件夹，找到package 中将tree文件夹复制过来进行修改，之后在自定义个组件然后引入。整体操作过于复杂，而且使用的是Avue-tree组件不好再自定义，因此，考虑修改css样式来控制复选框的显示和隐藏。
（2） 第二种 通过修改css样式来实现指定层级显示复选框的功能(推荐 )
具体实现代码如下：

<style lang="scss" scoped>
/deep/.el-tree-node {
      .el-tree-node__content>label.el-checkbox{
        margin-right: 0px;
        //把复选框给隐藏后样式的margin-right样式覆盖
      }
      .is-leaf + .el-checkbox .el-checkbox__inner{
       //在展示复选框时，将原来margin样式恢复
        margin-right: 8px;
        display: inline-block;
      }
      .el-checkbox .el-checkbox__inner{
        display: none;
      }
}
</style>

参考文档链接：el-tree 设置指定级别节点显示复选框