geg-gas-web/src/views/code/demo/components/DeptTree.vue

<template>
    <div class="m-4 mr-0 overflow-hidden bg-white">
        <BasicTree title="机构列表" toolbar search :clickRowToExpand="true" :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }" @select="handleSelect" />
    </div>
</template>
<script lang="ts">
    import { defineComponent, onMounted, ref } from 'vue';
    import { getDepartmentTree } from '/@/api/system/department';

    import { BasicTree, TreeItem } from '/@/components/Tree';

    export default defineComponent({
        name: 'DeptTree',
        components: { BasicTree },

        emits: ['select'],
        setup(_, { emit }) {
            const treeData = ref<TreeItem[]>([]);

            async function fetch() {
                treeData.value = (await getDepartmentTree()) as unknown as TreeItem[];
            }

            function handleSelect(keys: string, e) {
                emit('select', keys[0]);
                console.log(keys, e);
            }

            onMounted(() => {
                fetch();
            });
            return { treeData, handleSelect };
        }
    });
</script>