桐城住房建设网站,上海传媒公司介绍,广东新闻联播片头,做网站可以赚钱吗一、场景描述
实现一个分配权限的页面#xff0c;最左侧是大的权限模块的名称#xff0c;左右侧是控制其是否勾选的多选框。中间部分是一级权限模块下的子权限名称及多选框。
请求此权限模块数据的接口返回的是树形结构 对象数组。 主要属性为menuName表示权限名#xff0…一、场景描述
实现一个分配权限的页面最左侧是大的权限模块的名称左右侧是控制其是否勾选的多选框。中间部分是一级权限模块下的子权限名称及多选框。
请求此权限模块数据的接口返回的是树形结构 对象数组。 主要属性为menuName表示权限名isHas表示是否拥有此权限1或0字符串parentMenuId为0表示一级children表示子项id唯一标识。
展示在界面的数据为一级和没有子项的末级。对象数组项中可能没有children子项即权限一级二级三级四级都可能出现。多选框标识是否是否有此权限。并且存在依赖关系。当界面上某模块所有子项勾选一级多选框自动勾选一个子项未勾选一级多选框自动不勾选。一级多选框的勾选与否同时也能控制此模块的所有子项的勾选。 当选定权限保存时向后端传递的是界面上所有勾选项。 二、实现
2.1 数据渲染
el-checkbox的v-model属性为选中项绑定值可以是布尔、字符串或数字类型。用true-label和false-label标识选中和未选中值即可。 但是当使用的是否以为只能是布尔类型就把返回的数据依赖isHas转化一下渲染.
// PermissionsType.value是被赋值的数据
for (let i 0; i PermissionsType.value.length; i) {addIsCheckedProperty(PermissionsType.value[i]);
}
//增加isChecked标识选中未选中
function addIsCheckedProperty(menu) {if (menu.isHas 1) {menu.isChecked true;} else {menu.isChecked false;}if (menu.children menu.children.length 0) {for (let i 0; i menu.children.length; i) {addIsCheckedProperty(menu.children[i]);}}
}2.2 多选框的关联关系
为el-checkbox绑定change事件传递当前的项作为参数。 当parentMenuId 0即为一级数据检测到一级就根据一级数据更新其下所有子项isChecked 。 若为子项则根据所有子项的isChecked状态改变一级项的isChecked 状态
//el-checkbox的change事件
const handleCheckboxChange (item) {//点击一级if (item.parentMenuId 0) {updateChildrenCheckedStatus(item, item.isChecked);}updateParentCheckedStatus(PermissionsType.value);
};
// 递归更新子菜单状态
const updateChildrenCheckedStatus (menu, isChecked) {if (menu.children) {menu.children.forEach((child) {child.isChecked isChecked;updateChildrenCheckedStatus(child, isChecked); // 继续更新孙菜单});}
};
// 检查并更新父菜单状态
const updateParentCheckedStatus (menu) {menu.forEach((menuItem) {if (menuItem.children menuItem.children.length 0) {menuItem.isChecked areAllChildrenChecked(menuItem.children);} else if (!menuItem.isChecked) {menuItem.isChecked false; // 只有一级的isChecked置为false}});
};
const areAllChildrenChecked (children) {for (const child of children) {if (child.children child.children.length 0) {if (!areAllChildrenChecked(child.children)) {return false;}} else {if (!child.isChecked) {return false;}}}return true;
};2.3 只传递界面上勾选项的id
遍历数据中所有被选择项的id得到数组。 遍历数据只保留一级数据的id和末级数据的id得到数组。 数组去重。
for (let i 0; i PermissionsType.value.length; i) {getCheckedIds(PermissionsType.value[i]);
}
selectIgnore();
filteredMenuIds.value selectedMenuIds.value.filter((item) isIgnore.value.indexOf(item) -1);//递归遍历被选中权限id
function getCheckedIds(menu) {if (menu.isChecked true) {selectedMenuIds.value.push(menu.id);}if (menu.children menu.children.length 0) {for (let i 0; i menu.children.length; i) {getCheckedIds(menu.children[i]);}}
}
//有三级项时忽略掉二级项 有四级项时忽略三级项
const selectIgnore () {PermissionsType.value.forEach((item) {if (item.children) {item.children.forEach((child) {if (child.children) {isIgnore.value.push(child.id);child.children.forEach((childThird) {if (childThird.children) {isIgnore.value.push(childThird.id);}});}});}});
};
