vue中el-tree实现单选复选框

你的名字 2022-04-13 04:24 405阅读 0赞

# vue中el-tree实现单选复选框 #

### 遇到的问题 ###

*  使用vue的element框架时el-tree时，当填入复选框时，不能单选父节点

### 解决办法 ###

*  结合el-tree属性的控制和js配合来实现单选父子节点
    
    1.  去掉父子节点的关联
    2.  监听checkbox改变事件，从而控制只选择一个节点

### 最后的效果 ###

*  效果
    
     *  ![D4liyYs.jpg][]

### 控件关键代码 ###

*  el-tree控件
    
     
    
        <el-tree
            :data="groupTreeData"
            show-checkbox
            ref="DeviceGroupTree"
            node-key="id"
            check-strictly
            @check="checkGroupNode">
        </el-tree>
 *  关键的配置
    
    1.  :data树形结构的数据
    2.  show-checkbox 显示复选框
    3.  ref 可以this.$refs.DeviceGroupTree拿到此控件
    4.  node-key 给节点的编号【树形数据结构中有id字段】
    5.  check-stricty 父、子节点之间没有关联【不写这个，选了父节点，会默认选择全部的子节点】
    6.  check 复选框选择、取消选择时触发的事件
 *  树形数据结构
    
     
    
        "groupTreeData": [
            {
                "id": 3,
                "label": "西大门",
                "disabled": false,
                "children": [
                    {
                        "id": 125,
                        "label": "2单元",
                        "disabled": false,
                        "children": [
                            {
                                "id": 130,
                                "label": "2001",
                                "disabled": false,
                                "children": []
                            },
                            {
                                "id": 131,
                                "label": "2002",
                                "disabled": false,
                                "children": []
                            },
                            {
                                "id": 132,
                                "label": "2003",
                                "disabled": false,
                                "children": []
                            }
                        ]
                    }
                ]
            }
        ]

### js关键代码 ###

*  复选框改变方法监听
    
     
    
        checkGroupNode: function (a, b) {
            if (b.checkedKeys.length > 0) {
              this.$refs.DeviceGroupTree.setCheckedKeys([a.id]);
            }
        }

[D4liyYs.jpg]: https://i.imgur.com/D4liyYs.jpg