通过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 区域,避免用户点到上级元素
作者: 随风
出处: http://www.cnblogs.com/hanhaihu/>
关于作者:专注Java和前端!
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出, 原文链接 如有问题, 可邮件(739065949@qq.com)咨询.