vue+element实现单选父子无关系

最新推荐文章于 2024-07-01 23:06:40 发布

原创最新推荐文章于 2024-07-01 23:06:40 发布 · 363 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Vue+Element 单选 #脱离父子关系

本文介绍如何使用Vue结合Element UI组件库实现一个彻底的单选树状选择器，确保无论父子节点间的关系，整个树中仅能选择一个节点。通过设置属性和自定义方法，实现在任何情况下都保持单选状态的功能。

vue+element实现单选

注意哦：是彻底的单选，就是父子结点无关系的那种，一共只能选一个

<el-tree
        :data="data"
        show-checkbox
        default-expand-all
        node-key="id"
        :check-strictly="true" //父子关系脱离绑定
        ref="tree"
        highlight-current
        @check="check" //检测复选框的点击变化
        :props="defaultProps">
    </el-tree>

然后定义method：

methods:{
            check(data, node){
                  if(node.checkedKeys.length > 1){
                       this.$refs.tree.setCheckedNodes([]);
                       this.$refs.tree.setCheckedNodes([data]);
                  }
            },
        }

然后就OK啦，最后上效果图：
在这里插入图片描述

就是这样的，咋选都是单选