el-tree只有最后一级可以选中

我所做的需求是点击按钮的时候展示一个el-drawer，抽屉中显示一个树形控件，第一次请求回来的数据是菜单，菜单是无法选中的，只有点击菜单获取到的数据才可以进行选择。

html代码

<el-tree ref="treeForm" style="margin-top:15px;padding: 0 20px;" :data="data" :props="props" show-checkbox
                node-key="id" :check-strictly="true" @check="handleCheckChange" :default-expanded-keys="data"
                :default-checked-keys="treeCheckList" @node-click="treeNodeClick" :expand-on-click-node="false"
                class="stafftree" :default-expand-all="true">
</el-tree>复制

data定义的内容

data: [{
                id: null,
                label: '场景分类',
                children: []
            }],复制

因为我的需求是第一级是写死的数据，所以拿到请求后端的数据push到data的children中

methods中的方法

// 查找场景所有数据
// 获取菜单的数据，将每个菜单都添加属性isChange，isChange为false时该复选框禁用
        getTreeList() {
            listSysSceneClasses(this.queryTreeParams).then(res => {
                console.log('-------res', res)
                if (res.code === 200) {
                    res.rows.forEach(item => {
                        item.label = item.sceneName
                        item.isChange = false
                        if (item.children) {
                            item.children.forEach(val => {
                                val.label = val.sceneName;
                                val.isChange = false
                            })
                        }
                    })
                    this.data[0].children = res.rows
                    console.log('---------res.rows', res.rows)
                    console.log('---------this.data', this.data)
                    this.setDisabled(this.data)
                }
            })
        },复制

//  向有children的节点上增加disabled属性
        setDisabled(treeData) {
            if (treeData) {
                treeData.forEach(item => {
                    if (!item.isChange) {
                        item.disabled = true
                        this.setDisabled(item.children)
                    }
                })
            }
 
        },复制

获取菜单下的数据可以使用懒加载，我没有使用，需要的话可以去换一下

// 点击el-tree获取此菜单中的数据
treeNodeClick(node) {
            if (this.nodeIdPushList.indexOf(node.id) !== -1) {
                return
            } 
            // 将点击获取到的id push到nodeIdPushList中，再此点击时判断是否已经push过，push过直接return
            this.nodeIdPushList.push(node.id)
            this.queryParamsTree.sceneClassesId = node.id
            listScene(this.queryParamsTree).then(res => {
                console.log('-----------res', res)
                if (res.code === 200) {
                    let arr = []
                    res.rows.forEach(item => {
                        item.label = item.sceneName
                        item.isChange = true
                        arr.push(item.id)
                    })
                    this.data[0].children.forEach(dataItem => {
                        if (dataItem.id === node.id) {
                            dataItem.children.push(...res.rows)
                        }
                    })
                    this.setDisabled(this.data)
                }
            })
        },复制

将禁用的复选框隐藏掉

<style lang="scss" scoped>
/* 隐藏掉el-tree中有disabled属性的框框 */
/* .stafftree为el-tree的类名 */
::v-deep .stafftree {
 
    // 不可全选样式
    .el-tree-node {
        .el-checkbox__input.is-disabled {
            display: none;
        }
    }
    
}
</style>复制

最后的效果