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());
}
}

element中的tree组件实现菜单分配的更多相关文章

  1. element中的树形组件,如何获取父级菜单的id

    一般多选的树形组件,使用getCheckedNodes()方法只能获取到本级的菜单id,只有在子菜单全部选中的情况下才会选中上级.但我们想要不全选中子级的情况下也要获取它的上级,甚至上上级等,怎么办呢 ...

  2. 关于element中的父子组件的传值问题

    首先讲一下父子组件的传值问题. 这是大家很熟悉的一张图,讲述了父子组件传值的过程.父组件通过prop传值给子组件,子组件通过$emit给父组件发送消息来使父组件的prop发生变化.这都是老生常谈了.下 ...

  3. Element中(Notification)通知组件字体修改(Vue项目中Element的Notification修改字体)

    这个问题纠结很久,一样的写的为啥有的页面就可以,有的就不行: 后来才发现: 先说一下怎么设置: 先定义customClass一个属性,用来写class属性值: 之后还需要修改一下组件里style标签的 ...

  4. Element中Tree树结构组件中实现Ctrl和Shift多选

    在Element中的树结构中, 实现多选功能,首先的是判断有没有按下键盘ctrl和shift按键.但是在Element中的tree组件的左键点击事件是没有提供$event鼠标属性判断的.所以就需要在函 ...

  5. antd Tree组件中,自定义右键菜单

    最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component { state = { rightClickNodeTree ...

  6. [置顶] Flex中Tree组件无刷新删除节点

    在Tree组件中经常要删除某个节点,而删除之后重新刷新加载该Tree组件会影响整个操作效果和效率,因此,无刷新删除就比较好,既删除了节点也没有刷新tree,而使Tree的状态处于删除之前的状态. 无刷 ...

  7. 【Egret】中tree组件使用案例

    Egret中tree组件使用案例,包含(文本过多时,自动换行功能) 下面代码结合http://bbs.egret.com/forum.php?mod=viewthread&tid=19028& ...

  8. Element Tabs 组件中使用 ve-histogram组件渲染不出来(已解决)

    Element Tabs 组件中使用 ve-histogram组件渲染不出来 发现问题提了issue,饿了么前端“西瓜”同学很快做了回复,饿了么大前端团队有沉淀很专业,赞. tip: GitHub 的 ...

  9. iView中Tree组件children中动态checked选中后取消勾选再选中无效问题

    如题,我有一个Tree组件,动态更新check选中子级列表的时候,取消勾选了再点击选中时复选框样式不是勾选状态,但是数据已经有了. 对此解决方案是:将初始化时Tree组件data数据深拷贝一遍再去判断 ...

随机推荐

  1. Navicat定时 同步数据库

    转载:https://www.cnblogs.com/DFX339/p/11646812.html 我是用在了 mysql 和 sql server 数据同步(操作一模一样) 好文章,简单粗暴.适合我 ...

  2. Android各种蓝牙设备的UUID(转)

    转自:http://www.14blog.com/archives/481 UUID是“Universally Unique Identifier”的简称,通用唯一识别码的意思.对于蓝牙设备,每个服务 ...

  3. 38th 字符串与 列表间的转换

    字符串与 列表间的转换 如何利用字符串 'Life is short ,I use python'输出 :'python use I, short is Life' s = 'Life is shor ...

  4. spring boot 与微服务之间的关系

    Spring Boot 和微服务没关系, Java 微服务治理框架普遍用的是 Spring Cloud. Spring Boot 产生的背景,是开发人员对 Spring 框架越来越复杂的配置吐槽越来越 ...

  5. WebService发送 方法

    public String disableSaleOut(JSONObject jsonObject) throws ServiceException, MalformedURLException, ...

  6. bzoj1072题解

    [解题思路] 状压DP.f[i][j][k]表示当前DP到第i位,模d意义下余数为j,状态为k的方案数.其中状态k表示每个数字还剩多少个没取,状态数最多210. 于是有递推式转移方程:f[i+1][( ...

  7. linux centos6安装postgresql

    参考:https://blog.csdn.net/zhu_xun/article/details/21234663 参考:https://www.cnblogs.com/jimcsharp/p/857 ...

  8. Linux分页机制

    地址长度 在Linux下,unsigned long可以与地址的长度保持一致,即32位系统下unsigned long为32位,而64位系统下为64位长. 虚拟地址的分解 如图所示,通过XXX_SHI ...

  9. 更改eclipse中jsp默认编码格式为UTF-8

        本文首发于cartoon的博客     转载请注明出处:https://cartoonyu.github.io/cartoon-blog     近段时间一直在学java三大框架,遇到了一个问 ...

  10. 问题1-/usr/bin/python: No module named virtualenvwrapper

    操作系统:Ubuntu 问题:创建虚拟环境时,出现:/usr/bin/python: No module named virtualenvwrapper 解决方法: 1.切换到用户家目录 2.打开隐藏 ...