element el-tree 最后一级默认展开并显示复选框

如果树节节点是最后一级，那么element会自动在class里添加‘is-leaf’类名，那么就可以修改样式到达效果

<style lang="scss">
.tree-container
.el-tree {
    .el-tree-node {
        .el-tree-node__content {
            .el-checkbox {
                .el-checkbox__input {
                    .el-checkbox__inner {
                        display: none;
                    }
                }
            }

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

    }
}

</style>

效果如下：

如果想点击石A凯1的时候，自动展示该节点下面的子节点的复选框，而不是点击下拉框后查到该节点是最后一级再展示，可以这么做：

                 resolve(arr);
                // 如果是最后一个节点，在点击上级节点的时候就把复选框展示出来
                 arr.forEach(async (item,index) => {
                     const result = await query({
                         parentId: res.data[0].id,
                         modelCodes: ['ck_service', 'nvr']
                     })
                     if(result.data && result.data.length === 0){
                         node.childNodes[index].isLeaf = true
                     }
                 })

思路是这样的：在你查一个节点的时候，去判断该节点下面还有没有数据，如果没有，就在node里增加一个isLeaf属性，并设置为true，element会自动在class里增加‘is-leaf’类名，Node自带的结构：

完整代码：

             if (!node.parent) {
                return resolve([{
                    name: '/',
                    id: 0,
                    children: []
                }]);
            }

            // if (node.data.child && node.data.child.length !== 0) {
            //     resolve(node.data.child);
            //     return;
            // }

             query({
                parentId: node.data.id,
                modelCodes: ['ck_service', 'nvr']
            }).then( (res) => {
                if (res.code !== 'ok') {
                    this.$message.error(res.msg);
                    resolve([]);
                    return;
                }
                let arr = res.data || [];
                //按rank 排序和id排序.都是从小到大排序
                arr = arr.sort((arg1, arg2) => {
                    if (arg1.rank !== arg2.rank) {
                        return arg1.rank - arg2.rank;
                    }
                    return arg1.id - arg2.id;
                });

                //展开至第二级目录
                if (node.data.id === 0) {
                    this.expandedKeys = [0];
                    for (let arrElement of arr) {
                        this.expandedKeys.push(arrElement.id);
                    }
                }
                 resolve(arr);
                // 如果是最后一个节点，在点击上级节点的时候就把复选框展示出来
                 arr.forEach(async (item,index) => {
                     const result = await query({
                         parentId: res.data[0].id,
                         modelCodes: ['ck_service', 'nvr']
                     })
                     if(result.data && result.data.length === 0){
                         node.childNodes[index].isLeaf = true
                     }
                 })
            })
        },

<el-tree
            ref="tree"
            v-loading="loading"
            lazy
            show-checkbox
            :check-on-click-node="true"
            node-key="id"
            :check-strictly="true"
            :default-expanded-keys="expandedKeys"
            :load="loadNode"
            :data="treeData"
            :highlight-current="true"
            :expand-on-click-node="false"
            :props="defaultProps"
            @node-click="handleNodeClick"
            @check="handleTreeCheck"
        >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ data.name }}</span>
            </span>
        </el-tree>