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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
| <!--
| * @Description: 通用Tree组件
| * @Author: Ben Lin
| * @version:
| * @Date: 2024-06-19 11:07:21
| * @LastEditors: Ben Lin
| * @LastEditTime: 2024-06-21 13:31:30
| -->
| <template>
| <div class="m-4 mr-0 overflow-hidden bg-white">
| <TigerTree
| :title="title"
| toolbar
| search
| :add="add"
| treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
| :clickRowToExpand="false"
| :treeData="treeData"
| :renderIcon="createIcon"
| :fieldNames="fieldNames"
| @select="handleSelect"
| @handleAdd="handleAdd"
| @unselect="UnSelect"
| />
| </div>
| </template>
| <script lang="ts" setup>
| import { onMounted, ref } from 'vue';
| import { FieldNames, TigerTree, TreeItem } from '/@/components/TigerTree'
|
| defineOptions({ name: 'CustTree' });
|
| const emit = defineEmits(['select', 'handleAdd', 'UnSelect']);
| const props = defineProps({
| title: {
| // type: [Function, String] as PropType<string | ((data) => string)>,
| type: String,
| },
| treeData: {
| type: Array as PropType<TreeItem[]>,
| },
| createIcon: {
| type: Function as PropType<(params: Recordable<any>) => string>,
| },
| add: {type: Boolean,},
| fieldNames: {type: Object as PropType<FieldNames>},
| });
|
| function handleSelect(keys, e) {
| emit('select', keys[0], e);
| }
|
| function handleAdd() {
| emit('handleAdd');
| }
|
|
| function UnSelect(node) {
| emit('UnSelect', node);
| }
|
| onMounted(() => {});
| </script>
|
|
