36 lines
1.0 KiB
Vue
36 lines
1.0 KiB
Vue
|
<template>
|
||
|
|
<div class="m-4 mr-0 overflow-hidden bg-white">
|
||
|
|
<BasicTree title="部门列表" ref="asyncExpandTreeRef" toolbar search treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" loadData
|
||
|
|
:clickRowToExpand="false" :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }"
|
||
|
|
@select="handleSelect" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { onMounted, ref ,nextTick,unref} from 'vue';
|
||
|
|
|
||
|
|
import { BasicTree, TreeItem } from '@/components/Tree';
|
||
|
|
import { getDeptList } from '@/api/demo/system';
|
||
|
|
|
||
|
|
defineOptions({ name: 'DeptTree' });
|
||
|
|
|
||
|
|
const emit = defineEmits(['select']);
|
||
|
|
|
||
|
|
const treeData = ref < TreeItem[] > ([]);
|
||
|
|
const asyncExpandTreeRef = ref < Nullable < TreeActionType >> (null);
|
||
|
|
|
||
|
|
async function fetch() {
|
||
|
|
treeData.value = (await getDeptList()) as unknown as TreeItem[];
|
||
|
|
// 展开全部
|
||
|
|
nextTick(() => {
|
||
|
|
unref(asyncExpandTreeRef)?.expandAll(true);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleSelect(keys) {
|
||
|
|
emit('select', keys[0]);
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
fetch();
|
||
|
|
});
|
||
|
|
</script>
|