zoukankan      html  css  js  c++  java
  • 通过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 区域,避免用户点到上级元素

  • 相关阅读:
    跳板机操作
    常用进制之间的转换
    vim加脚本注释和文本加密
    LAMP框架
    wiki团队协作软件Confluence
    NFS网络文件系统
    ORACLE-12C-RAC INSTALL
    通过DB_LINK按照分区表抽取数据
    Oracle Rac crs无法启动
    删除undotbs后,数据库无法启动
  • 原文地址:https://www.cnblogs.com/hanhaihu/p/13161205.html
Copyright © 2011-2022 走看看