index.vue 1.44 KB
Newer Older
水落(YangLei)'s avatar
水落(YangLei) committed
1 2 3 4 5 6 7 8 9
<template>
    <a-tree
        :checkedKeys="value"
        :selectable="false"
        checkable
        :replaceFields="replaceFields"
        :tree-data="treeData"
        style="max-height:400px"
        class="tw-overflow-y-auto"
10
        :expandedKeys.sync="expandedKeys"
水落(YangLei)'s avatar
水落(YangLei) committed
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
        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,
28
        defaultCheckedKeys: Array,
水落(YangLei)'s avatar
水落(YangLei) committed
29 30 31 32 33 34 35 36
    },
    data() {
        return {
            treeData: [],
            replaceFields: {
                title: 'menuName',
                key: 'menuId',
            },
37
            expandedKeys: [],
水落(YangLei)'s avatar
水落(YangLei) committed
38 39 40
        };
    },
    async mounted() {
水落(YangLei)'s avatar
水落(YangLei) committed
41 42
        // 使用 缓存
        this.rawData = await getMenuDataApi(true);
水落(YangLei)'s avatar
水落(YangLei) committed
43
        this.treeData = convertListToTree(this.rawData, !this.showMenu);
44 45 46 47 48 49 50 51 52
        this.$emit('check', this.defaultCheckedKeys);
        this.expandedKeys = this.defaultCheckedKeys;
    },

    watch: {
        defaultCheckedKeys(val) {
            this.$emit('check', val);
            this.expandedKeys = val;
        },
水落(YangLei)'s avatar
水落(YangLei) committed
53 54 55 56 57 58 59 60 61 62
    },

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