Ant Design Vue Tree 选中子节点同时半选中父级节点
需要实现的效果：
- 1、子菜单如果不是全部选中，一级菜单半选。
- 2、子菜单全选，一级菜单选中。
- 3、一级菜单选择，二级菜单全选。
- 4、没有二级菜单，则只控制一级菜单。
主要用到的属性是checked和halfCheckedKeys，通过手动控制那些菜单选中，那些半选中实现功能。
**页面截图： **
完整代码如下：
<template>
<div>
<a-tree v-model="checkedKeys" checkable :tree-data="menuList" @check="onCheck"></a-tree>
</div>
</template>
<script>
import { getRoleMenusById } from '@/api/role'
import { getMenusList } from '@/api/menu'
import { sortBykey, toTree } from '@/utils/common'
export default {
name: 'EditModal',
data () {
return {
checkedKeys: [],
record: {},
// 全部菜单
menuList: [],
// 授权菜单
menuRole: []
}
},
created () {},
mounted () {},
methods: {
sortBykey,
toTree,
/**
* 获取用户的授权菜单
* @param {*} menuId
* @returns
*/
getUserMenus (menuId) {
return new Promise((resolve, reject) => {
getRoleMenusById(menuId).then((res) => {
resolve(res)
}).catch((err) => {
reject(err)
})
})
},
/**
* 获取菜单列表
*/
getMenusList () {
return new Promise((resolve, reject) => {
getMenusList().then((response) => {
response = response.items
response.forEach((item) => {
item.title = item.name
item.key = item.id
})
response = this.sortBykey(response, 'sort')
response = this.toTree(response)
resolve(response)
}).catch((err) => {
reject(err)
})
})
},
/**
* 选中树状菜单
* @param {*} checkedKeys
* @param {*} info
*/
onCheck (checkedKeys, info) {
console.log(checkedKeys, info)
this.checkedKeys = this.getCheckedKeys(this.menuList, checkedKeys)
},
/**
* 筛选选中，以及半选中
* 判断当前的节点是否选择，如果选中，判断主节点是否需要选中，
如果没选中，判断主节点是否要选中
* @param {*} menuList
* @param {*} checkedMenu
*/
getCheckedKeys (menuList, checkedMenu) {
console.log('checkedMenu', checkedMenu)
console.log('menuList', menuList)
const result = {
checked: [],
halfCheckedKeys: []
}
// 选出二级菜单，那些选中
menuList.forEach((item) => {
if (item.children) {
const subAllMenu = item.children.map(item => item.key)
const isCheckedAll = this.selectedAllSubMenu(subAllMenu, checkedMenu)
if (isCheckedAll) {
// 一级菜单全选
result.checked.push(item.key)
// 二级菜单全选
result.checked = [...result.checked, ...subAllMenu]
} else {
// 二级菜单只选选中的
const subMenu = this.getSubMenu(item.children, checkedMenu)
result.checked = [...result.checked, ...subMenu]
if (subMenu.length) {
// 根据二级菜单是否选中来半选一级菜单
result.halfCheckedKeys.push(item.key)
}
}
} else {
// 一级菜单选中是否选中
if (checkedMenu.indexOf(item.key) !== -1) {
result.checked.push(item.key)
}
}
})
return result
},
/**
* 检测子菜单是否都选中
* @param {*} sub
* @param {*} menu
*/
selectedAllSubMenu (sub, menu) {
for (const item of sub) {
if (!menu.includes(item)) {
// 如果sub中的某个元素不在superset中，则返回false
return false
}
}
// 如果所有元素都在menu中，则返回true
return true
},
/**
* 获取选中的子菜单
* @param {*} sub
* @param {*} menu
*/
getSubMenu (sub, menu) {
const result = []
sub.forEach(item => {
if (menu.indexOf(item.key) !== -1) {
result.push(item.key)
}
})
return result
},
/**
* 初始化
* @param {*} record
*/
async init (record) {
this.record = { ...record }
this.$nextTick(async () => {
// 全部菜单
this.menuList = await this.getMenusList()
console.log('menuList', this.menuList)
// 授权菜单
this.menuRole = await this.getUserMenus(this.record.menu_id)
console.log('menuRole', this.menuRole)
// 授权菜单特殊处理，子菜单未完全选中，父菜单半选中
// this.menuRole.menu 数据为 [2,6,7,8,9,10,11,12,13,16,17,18,19,20,21,22,24]
this.checkedKeys = this.getCheckedKeys(this.menuList, this.menuRole.menu.split(',').map(Number))
})
}
}
}
</script>
完成！