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值,因此需要递归遍历。

Logo

前往低代码交流专区

更多推荐