通過el-tree 實現每次可選中一個節點方案(非checkbox)

          <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 區域，避免用戶點到上級元素