Ant Design Vue Tree 选中子节点同时半选中父级节点

需要实现的效果:

  • 1、子菜单如果不是全部选中,一级菜单半选。
  • 2、子菜单全选,一级菜单选中。
  • 3、一级菜单选择,二级菜单全选。
  • 4、没有二级菜单,则只控制一级菜单。

主要用到的属性是checkedhalfCheckedKeys,通过手动控制那些菜单选中,那些半选中实现功能。

**页面截图: **

完整代码如下:

<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>

完成!