element中的tree组件实现菜单分配
- 返回的菜单数据
- 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组件实现菜单分配的更多相关文章
- element中的树形组件,如何获取父级菜单的id
一般多选的树形组件,使用getCheckedNodes()方法只能获取到本级的菜单id,只有在子菜单全部选中的情况下才会选中上级.但我们想要不全选中子级的情况下也要获取它的上级,甚至上上级等,怎么办呢 ...
- 关于element中的父子组件的传值问题
首先讲一下父子组件的传值问题. 这是大家很熟悉的一张图,讲述了父子组件传值的过程.父组件通过prop传值给子组件,子组件通过$emit给父组件发送消息来使父组件的prop发生变化.这都是老生常谈了.下 ...
- Element中(Notification)通知组件字体修改(Vue项目中Element的Notification修改字体)
这个问题纠结很久,一样的写的为啥有的页面就可以,有的就不行: 后来才发现: 先说一下怎么设置: 先定义customClass一个属性,用来写class属性值: 之后还需要修改一下组件里style标签的 ...
- Element中Tree树结构组件中实现Ctrl和Shift多选
在Element中的树结构中, 实现多选功能,首先的是判断有没有按下键盘ctrl和shift按键.但是在Element中的tree组件的左键点击事件是没有提供$event鼠标属性判断的.所以就需要在函 ...
- antd Tree组件中,自定义右键菜单
最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component { state = { rightClickNodeTree ...
- [置顶] Flex中Tree组件无刷新删除节点
在Tree组件中经常要删除某个节点,而删除之后重新刷新加载该Tree组件会影响整个操作效果和效率,因此,无刷新删除就比较好,既删除了节点也没有刷新tree,而使Tree的状态处于删除之前的状态. 无刷 ...
- 【Egret】中tree组件使用案例
Egret中tree组件使用案例,包含(文本过多时,自动换行功能) 下面代码结合http://bbs.egret.com/forum.php?mod=viewthread&tid=19028& ...
- Element Tabs 组件中使用 ve-histogram组件渲染不出来(已解决)
Element Tabs 组件中使用 ve-histogram组件渲染不出来 发现问题提了issue,饿了么前端“西瓜”同学很快做了回复,饿了么大前端团队有沉淀很专业,赞. tip: GitHub 的 ...
- iView中Tree组件children中动态checked选中后取消勾选再选中无效问题
如题,我有一个Tree组件,动态更新check选中子级列表的时候,取消勾选了再点击选中时复选框样式不是勾选状态,但是数据已经有了. 对此解决方案是:将初始化时Tree组件data数据深拷贝一遍再去判断 ...
随机推荐
- Navicat定时 同步数据库
转载:https://www.cnblogs.com/DFX339/p/11646812.html 我是用在了 mysql 和 sql server 数据同步(操作一模一样) 好文章,简单粗暴.适合我 ...
- Android各种蓝牙设备的UUID(转)
转自:http://www.14blog.com/archives/481 UUID是“Universally Unique Identifier”的简称,通用唯一识别码的意思.对于蓝牙设备,每个服务 ...
- 38th 字符串与 列表间的转换
字符串与 列表间的转换 如何利用字符串 'Life is short ,I use python'输出 :'python use I, short is Life' s = 'Life is shor ...
- spring boot 与微服务之间的关系
Spring Boot 和微服务没关系, Java 微服务治理框架普遍用的是 Spring Cloud. Spring Boot 产生的背景,是开发人员对 Spring 框架越来越复杂的配置吐槽越来越 ...
- WebService发送 方法
public String disableSaleOut(JSONObject jsonObject) throws ServiceException, MalformedURLException, ...
- bzoj1072题解
[解题思路] 状压DP.f[i][j][k]表示当前DP到第i位,模d意义下余数为j,状态为k的方案数.其中状态k表示每个数字还剩多少个没取,状态数最多210. 于是有递推式转移方程:f[i+1][( ...
- linux centos6安装postgresql
参考:https://blog.csdn.net/zhu_xun/article/details/21234663 参考:https://www.cnblogs.com/jimcsharp/p/857 ...
- Linux分页机制
地址长度 在Linux下,unsigned long可以与地址的长度保持一致,即32位系统下unsigned long为32位,而64位系统下为64位长. 虚拟地址的分解 如图所示,通过XXX_SHI ...
- 更改eclipse中jsp默认编码格式为UTF-8
本文首发于cartoon的博客 转载请注明出处:https://cartoonyu.github.io/cartoon-blog 近段时间一直在学java三大框架,遇到了一个问 ...
- 问题1-/usr/bin/python: No module named virtualenvwrapper
操作系统:Ubuntu 问题:创建虚拟环境时,出现:/usr/bin/python: No module named virtualenvwrapper 解决方法: 1.切换到用户家目录 2.打开隐藏 ...