Ant Design of Vue -- 实现树形结构的只能选最下层数据及只默认展开选中的数据
Ant Design of Vue -- 实现树形结构1. 展示形式2. 代码实现2.1 样式实现2.2 只能选最下层数据2.3 默认只展开选中的数据1. 展示形式2. 代码实现2.1 样式实现<a-tree v-model="checkedKeys" checkable :tree-data="treeData" :expanded-keys="expandedKeys"@expand="
·
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值,因此需要递归遍历。
更多推荐
已为社区贡献12条内容
所有评论(0)