element中的tree组件实现菜单分配

1. 返回的菜单数据
   
   
   
   
2. tree组件的使用

<el-tree
ref="menuList" //
:data="menuList" // 展示数据
:props="defaultProps" // 配置选项
show-checkbox // 节点是否可被选中
node-key="menuId" // 唯一标识
:check-strictly="checkStrictly" // 设置父子关联
:default-expand-all="expandAll" // 是否默认展开所有节点
:default-checked-keys="checkedKeys" // 默认勾选节点的数组
@node-click="handleNodeClick" // 节点被点击时回调
@check-change="handleCheckChange" // 当前选中节点变化时触发的事件
>
</el-tree>


export default {
data() {
return {
expandAll: true,
checkedKeys: [],
menuList: [],
defaultProps: {
children: 'menuList',
label: 'menuName'
},
selectMenuId: [],
selArr: [],
roleAllLists: [],
roleId: '',
checkStrictly: true
}
},
methods: {
// 获取所有角色列表
getRoleAllLists () {
this.loading = true;
this.axios.post("/adminUserService/queryRoleList", {}).then(res => {
if (res && res.data.data.code === 200) {
// 设置tree数据
this.menuList = res.data.data.data.menuList;
// 获取选中的节点数组
this.selectKeys(this.menuList);
// 给选中的节点前添加对号
this.checkedKeys = this.selArr;
}
})
},
// 查找已经被选中的节点
selectKeys (menuList) {
for (let menu of menuList) {
if (menu.hasMenue) {
this.selArr.push(menu.menuId);
}
if (menu.menuList) {
this.selectKeys(menu.menuList)
}
}
},
// 保存菜单
saveRoleMenu () {
console.log(this.roleId)
this.axios.post("/adminUserService/saveRoleMenu", {roleId: this.roleId, menuIdList: this.selectMenuId}, {}).then(res => {
if (res && res.data.data.code === 200) {
this.$message({
message: "角色菜单修改成功",
type: 'success'
})
this.dialogVisible = false;
}
})
},
// 节点选中状态改变
handleCheckChange(data, checked, indeterminate) {
this.checkStrictly = false;
// 节点被选中时，获取所有选中的节点id
this.selectMenuId = this.$refs.menuList.getCheckedKeys().concat(this.$refs.menuList.getHalfCheckedKeys());
}
}
｝