index.vue

<template>
    <a-tree
        :checkedKeys="value"
        :selectable="false"
        checkable
        :replaceFields="replaceFields"
        :tree-data="treeData"
        style="max-height:400px"
        class="tw-overflow-y-auto"
        v-bind="$attrs"
        v-on="$listeners"
    />
</template>

<script>
import { getMenuDataApi } from '@/api';
import { convertListToTree } from '@/utils';

export default {
    model: {
        prop: 'value',
        event: 'check',
    },
    props: {
        value: [Object, Array],
        showMenu: Boolean,
    },
    data() {
        return {
            treeData: [],
            replaceFields: {
                title: 'menuName',
                key: 'menuId',
            },
        };
    },
    async mounted() {
        this.rawData = await getMenuDataApi();
        this.treeData = convertListToTree(this.rawData, !this.showMenu);
    },

    methods: {
        get() {
            if (Array.isArray(this.value)) return this.rawData.filter(m => this.value.includes(m.menuId));
            return [];
        },
    },
};
</script>