通过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,(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 区域,避免用户点到上级元素

原文地址:https://www.cnblogs.com/hanhaihu/p/13161205.html