elementUi的el-tree实现单选

    <el-tree

              ref="elemTree"

              :data="treeData"

              check-strictly

              show-checkbox

              :default-expand-all="true"

              node-key="id"

              @check-change="nodeCheckChangeHandle"

            >

            </el-tree>

methods: {

    nodeCheckChangeHandle(data, isSelected, isLeafSeleted) {

      const refElem = this$refselemTree;

      if (isSelected) {

        refElemsetCheckedKeys([dataid]);

      }

    },

}

树形控件使用文档

一、获取选中的值

        方法：check() 在复选框改变时触发

        参数：当前 *** 作的节点数据、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性 

二、懒加载

        方法：load() 在渲染树加时载且只加载一次，会缓存每次懒加载获得的子节点数据

        参数：node，resolve

        出现问题：由于在懒加载模式下，渲染的树不会动态更新。如果在一个页面里，使用同一个树渲染数据，但是根据不同条件渲染的数据不同，需要重新渲染树。

        解决方式：1）在load方法中，记录下渲染第一层的node和resolve   2) 在需要重新渲染树的方法中再次调用loadNode()

没有直接的办法，除非你用xpath之类，最简单就是直接自己循环

Node node = rootgetFirstChild();

while(node != null) {

if(nodegetNodeType() == NodeELEMENT_NODE) {

Element entry = (Element)node;

if(entrygetAttribute("key")equals("title") {

value = entrygetAttribute("value");

break;

}

}

node = nodegetNextSibling();

}

每天进步一点点~ 加油！

需求：

1：父子节点不关联，且，

2：父节点不显示复选框，并且不传值给后端

3：实现单选

1：解决父子节点不关联

2：父节点不显示复选框

注意：

如果标签上有scoped 会有样式修改失败的情况，去掉之后，在el-tree前加当前页面的id或者class就可以了，也可以 避免样式污染

3：实现单选

如果对小伙伴们有帮助，大家别忘了 双击点赞哦

element-ui里el-tree选中子节点用getCheckedKeys()只返回子节点

如果需求是：选中任何一个子节点都默认选择父节点，怎么办？

其实，element-ui也提供了方案，常规下，如果子节点选中，那么这时父节点是半选中状态，在获取选中值时，只需要利用getHalfCheckedKeys()+getCheckedKeys()两个方法即可达到效果。

网上有很多重置el-tree勾选以达到单选的目的，

主要思路是在点击多选框或者是点击树节点时候 setCheckedNodes 设置当前勾选节点

但是亲身实验效果并不理想，多层级或快速点击时都会选择多个或者页面视图是勾选一个，但是获取勾选元素时还是多个节点被勾选

于是，展示自定义节点内容，并加入radio单选按钮真正的实现单选；

上面事件通过调用事件 check-change ,每次节点选中状态发生改变时都会回调，会一直调用 setCheckedKeys([]) 方法，所以会一直选中节点，再次点击不会取消。

将 @check-change 事件改成使用 @check 事件。当第二次点击节点的时候，判断 check 事件的第二个属性 树目前的选中状态对象 。

如果 checkedcheckedKeys 为空，说明是取消选中，那么调用 setCheckedKeys([]) 置空就行了。

如果 checkedcheckedKeys 不为空，说明是选择别的节点，那么保持单选状态，也是将点击节点的 id 传给 setCheckedKeys([]) 方法。

以上就是关于elementUi的el-tree实现单选全部的内容，包括:elementUi的el-tree实现单选、element ui树形控件多选功能的使用、element对象的什么方法用来获取节点属性等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！