element ui tree vue2

效果图是这个样子的

基础的数据就不说了，看官方文档就可以，专门写一下怎么把父元素的可选框取消。

就是找到父元素，把它的可选框用display取消，让子元素的可选框dispaly设置成inline-block就行，要是样式没变化用样式穿透就行。

  <el-tree
                        ref="tree"
                        show-filter
                        :data="data"
                        :props="treeProps"
                        show-checkbox
                       :border="false"
                       :width="200"
                       class="tree "
                       :render-content="renderContent"
                    >
                    </el-tree>

  .tree{
    border: none !important;
    ::v-deep label{
    display: none;
    }
    ::v-deep .gp-v21-tree-node__children{
        label{
        display: inline-block;
      } 
      .is-leaf{
        display: none;
      }
    }
    
  }

第二个是两个图标的渲染，是通过渲染函数

renderContent(h, { node, data, store }) {
          console.log("渲染函数走了")
          if (node.childNodes.length === 0 && node.label!=='代销机构') {
              return (
                <div class="custom-tree-node">
                  <span>{node.label}</span>
                    <span class='ml'>
                    <i class="el-icon-edit" on-click={ () => this.edit(node,data) }></i>
                  </span>
                  <span class='ml'>
                    <i class="el-icon-delete" on-click={ () => this.openDialoag(node,data) }></i>
                  </span>
                </div>
            )
            } else {
              return (
                <span class="custom-tree">
                  <span>{node.label}</span>
                </span>
                )
        } 
      },

node.childNodes.length=0的时候就是最底层的节点，还可以通过node.label 来判断