element ui tree组件实现单选

    因为最近项目需求，后台接口返回树结构形式的数据，页面需要能够勾选树节点，并且有且只能勾选一个。

    看了element ui的官方文档，并没有发现支持单选的方法及事件，但是有个check-strictly（在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false）属性，加上该属性就会取消父节点与子节点之间的关联关系，但是目前还是可以选中多个，我的思路是当触发check-change事件时，通过getCheckedKeys（若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组）方法拿到当前被选中节点所组成的数组，若数组的长度大于1，则比较当前选中的数组与上次选中的数组=>去重=>拿到最新选中的节点的key值=>重置树的check状态=>重新赋值；若数组的长度小于1，则在提交的时候提醒至少需要勾选一个节点。

具体实现代码如下：

// .vue部分

<el-tree

    ref="fileTree"

    :data="fileTree"

    :check-strictly="true"

    :show-checkbox="true"

    @check-change="checkChange"

    :props="defaultProps"

     node-key="value"> </el-tree>

// script部分

// 只允许选中一个叶子结点

checkChange() {

    this.leafCheckArr = this.$refs.fileTree.getCheckedKeys()

    let arr = []

    this.leafCheckArr.forEach(item => {

        arr.push(item)

    })

    if (this.leafCheckArr.length > 1) {

      arr = this.leafCheckArr.filter(item => {

        return item != this.oldCheckKey

      })

    }

    // this.oldCheckKey就是最后选中的节点的值

    this.oldCheckKey = arr.join('')

    this.$refs.fileTree.setCheckedKeys([]);

    this.$refs.fileTree.setCheckedKeys([this.oldCheckKey]);

    // 通过 this.$refs.fileTree.getCheckedNodes()[0]['label'] 可以拿到最后选中的节点的label

    this.editForm.folderName = this.$refs.fileTree.getCheckedNodes()[0]['label']

}

补充：

data部分：

data() {

    return {

        fileTree: [],

        defaultProps: { id: 'value' },

        leafCheckArr: [],

       oldCheckKey: ''

    }

}

后台返回数据：