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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
| <template>
| <div class="select_box">
| <el-tree-select
| ref="treeselect"
| :currentNodeKey="currentNodeKey1"
| :highlight-current="true"
| :node-key="selectProp.id"
| filterable
| :check-strictly="checkStrictly"
| :props="selectProp"
| v-model="selectValue"
| :data="selectData"
| :clearable="clearable"
| placeholder="请选择"
| :expandNode="expandNode"
| @node-click="selectchange"
| :auto-expand-parent="true"
| :render-after-expand="renderAfterExpand"
| >
| <template #default="{ node, data }">
| <span class="custom-tree-node">
| <span style="display: flex; justify-content: center; align-items: center">
| <SvgIcon v-if="data.Children && data.Children.length > 0" name="ele-Folder" :size="18" class="span_color"></SvgIcon>
| <SvgIcon v-else name="ele-Document" :size="14" class="span_color"></SvgIcon>
| {{ node.label }}
| </span>
| </span>
| </template>
| </el-tree-select>
| </div>
| </template>
| <script lang="ts" setup name="treeSelectByMgr">
| import { toRefs, ref, watch, onMounted, nextTick } from 'vue';
| const props = defineProps({
| checkStrictly: {
| type: Boolean,
| default: false,
| },
| defaultSelectValue: {
| type: String,
| default: () => {
| return '';
| },
| },
| currentNodeKey: {
| type: [String, Number],
| default: () => {
| return '';
| },
| },
| selectData: {
| type: Array,
| default: () => {
| return [];
| },
| },
| selectProp: {
| type: Object,
| default:()=>({
| id: 'ID',
| label: 'Name',
| children: 'Children',
| }),
| },
| clearable: {
| type: Boolean,
| default: false,
| },
| expandNode: {
| type: Boolean,
| default: false,
| },
| renderAfterExpand: {
| type: Boolean,
| default: false,
| },
| });
| const { checkStrictly, defaultSelectValue, currentNodeKey, selectData, selectProp, clearable, expandNode, renderAfterExpand } = toRefs(props);
|
| const emits = defineEmits<{
| (event: 'nodeClick', node: any): void;
| }>();
|
| let selectValue = ref('');
| let currentNodeKey1 = ref(null);
|
| const treeselect = ref();
| onMounted(() => {
| selectValue.value = defaultSelectValue.value;
| });
| const selectchange = (node) => {
| emits('nodeClick', node);
| };
| watch(defaultSelectValue, (val) => {
| selectValue.value = val;
| });
| watch(currentNodeKey, (val) => {
| let key = val;
| if (selectData.value.length && key === '') {
| key = selectData.value[0][selectProp.value.id];
| }
| currentNodeKey1.value = key;
| nextTick(() => {
| treeselect.value.setCurrentKey(key); // 设置默认选中
| });
| });
| </script>
|
| <style scoped>
| .select_box {
| width: 100%;
| height: 100%;
| }
| .span_color {
| font-size: 18px;
| color: rgb(64, 158, 255);
| width: 18px;
| height: 18px;
| margin-right: 5px;
| }
| .custom-tree-node {
| flex: 1;
| display: flex;
| align-items: center;
| justify-content: space-between;
| font-size: 14px;
| padding-right: 8px;
| }
| </style>
|
|
