Ant Design of Vue -- 实现树形结构的只能选最下层数据及只默认展开选中的数据

1. 展示形式

2. 代码实现

2.1 样式实现

<a-tree v-model="checkedKeys" checkable :tree-data="treeData" :expanded-keys="expandedKeys"
        @expand="onExpand" @check="onCheck" />

/**
* @func：打开分配菜单抽屉
 * @param：{object} record -- 行数据
 * */
showMenu(id){
    this.visible = true;
    this.id = (typeof id === "object"?id.id:id);
    this.isEquipment = (typeof id === "object"?id.isEquipment:false); // 判断是否是从设备列表中传过来的数据
    this.expandedKeys = []; // 关闭所有展开的项
    this.getExpandData = [];
    this.$api.mock(this.URL.getMenu + this.id, {method: "get"}).then(res => {
        if (res.data.httpStatus === 200) {
            // 选中项
            this.checkedKeys = res.data.data.checkedIds;
            // 数据：一般情况
            if (!this.isChildId) this.treeData = res.data.data.arrTree;
            // 数据：需要给父级设置disabled的情况
            if (this.isChildId) this.getDisabled(res.data.data.arrTree);
            // 设备列表菜单：需要展开关联的房屋数据
            if(this.isEquipment && res.data.data.checkedIds){
                this.getExpand(res.data.data.arrTree,this.checkedKeys[0]);
                this.expandedKeys = this.getExpandData;
            }
        }
    })
},

/**
 * @func：展开关闭
 * @param：{object} record -- 行数据
 * */
onExpand(expandedKeys) {
    this.expandedKeys = expandedKeys;
},

2.2 只能选最下层数据

/**
 * @func：设置 disabled 属性
 * @param：{array} data -- 树数据
 * */
getDisabled(data) {
    data.forEach(item => {
        if (item.children) {
            item.disabled = true;
            this.getDisabled(item.children)
        }
        this.treeData = data;
    });
},

2.3 默认只展开选中的数据

/**
 * @func：展开关联的房屋
 * @param：{array} data -- 树数据
 * @param：{String} targetKey -- 目标数据的key
 * */
getExpand(data,targetKey) {
    for(let index=0;index<data.length;index++){
        if(data[index].children){
            // 递归查询到最下层数据
            this.getExpand(data[index].children,targetKey);
        }
        // 找到选中数据的父节点（最上层的父节点是“0”）
        if(data[index].key === targetKey && data[index].parentId !== "0"){
            this.getExpandData.push(data[index].parentId);
            // 逐层向上查找父节点
            this.getExpand(this.treeData,data[index].parentId);
        }
    }
},

后台传过来的数据只有选中数据的key值，但是展开需要其父级的所有key值，因此需要递归遍历。