<el-tree
          v-if="orgDrawer" 
          :data="orgTree" 
          size="medium" 
          ref="orgTree"
          highlight-current
          :props="defaultProps"
          :expand-on-click-node="false" 
          @current-change="currentChange" 
          node-key="id"
          :default-expanded-keys="expandKeys"
          >
            <span :class="['custom-tree-node',data.disabled?'disabled':'']" slot-scope="{ node, data }" @click="selectNode($event,node,data)">
              <span class="label">{{ node.label }}</span>
              <span><i class="el-icon-check"></i></span>
              <span class="mask" :style="{'position':'absolute',left:0,width:(node.level-1)*18+'px',height:'32px'}"></span>
            </span>
          </el-tree>
    selectNode(event, node, data) {
      if (data.disabled) {
        event.stopPropagation();
      }
    },

思路为：

1、通过节点数据中的disabled字段来定义当前行的不可选择样式

2、通过节点数据中的disabled字段来判断事件是否需要冒泡，disabled则组织冒泡；

3、自定义节点高度100%，确保用户点击区域在当前节点；

4、自定义mask元素，通过节点的level来算出定位距离，把元素覆盖到上级元素的padding 区域，避免用户点到上级元素

版权声明：本文为hanhaihu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/hanhaihu/p/13161205.html