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

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

遇到的问题

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

解决办法

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

最后的效果

• 效果
  • 

控件关键代码

• 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]);
      }
  }