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>  

完成！