1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| <template>
| <div class="m-4 mr-0 overflow-hidden bg-white">
| <BasicTree
| title="部门列表"
| toolbar
| search
| treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
| :clickRowToExpand="false"
| :treeData="treeData"
| :fieldNames="{ key: 'id', title: 'deptName' }"
| @select="handleSelect"
| />
| </div>
| </template>
| <script lang="ts">
| import { defineComponent, onMounted, ref } from 'vue';
|
| import { BasicTree, TreeItem } from '/@/components/Tree';
| import { getDeptList } from '/@/api/demo/system';
|
| export default defineComponent({
| name: 'DeptTree',
| components: { BasicTree },
|
| emits: ['select'],
| setup(_, { emit }) {
| const treeData = ref<TreeItem[]>([]);
|
| async function fetch() {
| treeData.value = (await getDeptList()) as unknown as TreeItem[];
| }
|
| function handleSelect(keys) {
| emit('select', keys[0]);
| }
|
| onMounted(() => {
| fetch();
| });
| return { treeData, handleSelect };
| },
| });
| </script>
|
|
