el-tree 实现单选

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、解决

1.el-tree 的配置

代码如下（示例）：

 <el-tree
   	ref="tree" //tree 节点本身
    highlight-current="true"
    accordion
    show-checkbox //显示选框
    check-strictly='true'
    :data="treeData"
    :default-expanded-keys="treeExpandData"
    node-key="id" //节点的唯一标识，treedata 里面的标识值
    check-on-click-node='true' // 节点选中的同时选中选框
    :props="treeDefaultProps"
    @check='checkGroupNode'>
  </el-tree>

2.js

代码如下（示例）：

checkGroupNode(a, b) {
//a =>obj (选中节点的参数)
//b => checkedKeys: [160000001] checkedNodes: [{…}] halfCheckedKeys: [] halfCheckedNodes: []
//[[Prototype]]: Object
      if (b.checkedKeys.length > 0) {
        this.$refs.tree.setCheckedKeys([a.id]);
      }
    },

3.css

代码如下（示例）：

//去除父节点的选框
/deep/ .el-tree {
  padding-top: 15px;
  padding-left: 10px;

  .el-tree-node {
    .is-leaf + .el-checkbox .el-checkbox__inner {
      display: inline-block;
    }

    .el-checkbox .el-checkbox__inner {
      display: none
    }
  }
}

4.效果