el-tree 如何实现单选 以及 单击某条name也可以实现点击checkbox的效果

使用elment框架的项目中有对属性结构的数据进行单选的需求，

一下是实现的方法
 

<el-tree

  size="small"

  show-checkbox

  :data="template.listClashCategory"

  node-key="id"

  :check-strictly="true"

  :default-expanded-keys="template.expandedKeys"

  :props="collisionDetails.treePorps"

  v-loading="template.tableLoading"

  @check-change="templateCheckChange"

  @node-click="templateClick"

ref="templateTree">

</el-tree>

 

check-strictly：在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false，这里改为true，父子不关联

node-key：每个树节点用来作为唯一标识的属性，整棵树应该是唯一的

 注：当你data里数据唯一表示的属性值是id的话，node-key="id",若为 zoneId的话，那node-key="zoneId"

// tree单击
    treeNodeClick (data) {
      let id = this.$refs.tree.getCheckedKeys()
      if (id instanceof Array && id[0] === data.id) {
        this.treeCheckChange(data, false)
      } else {
        this.treeCheckChange(data, true)
      }
    },
    treeCheckChange (data, check) {
      const _this = this
      this.form.parameterMajor_id = []
      if (check) {
        this.form.id = data.id
        this.$refs.tree.setCheckedKeys([data.id])
        if (data.childlist && data.childlist.length > 0) {
          _this.setDeleteids(data)
        } else {
          _this.form.parameterMajor_id.push(data.id)
          _this.initial()
        }
      } else {
        if (this.form.id === data.id) {
          this.form.parameterMajor_id = []
          this.form.id = ''
          this.$refs.tree.setCheckedKeys([])
          this.initial()
        }
      }
    },

 

 

这样就可以实现单选了

// ---------------------------------------- 2020-09-18 修改 -----------------------------------------------------

上述中会存在一个小问题，就是在使用checkbox进行选择的话，当已经选择了一个，现在再次点击来取消已选的节点，会取消不了，需要在 templateCheckChange 做如下修改

templateCheckChange () {
    if () {
        ...
    } else {
        if (this.template.checkedId === data.id) {
            this.$refs.templateTree.setCheckedKeys([])
        }
    }
}