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
| <template>
| <mars-pannel :visible="true" right="10" top="10">
| <mars-tree checkable defaultExpandAll :tree-data="treeData" @check="checkedChange" v-model:checkedKeys="checkedKeys">
| <template #title="{ title }">
| <span class="tree-style" :title="title">{{ title }}</span>
| </template>
| </mars-tree>
| </mars-pannel>
| </template>
|
| <script setup lang="ts">
| import { ref } from "vue"
| import * as mapWork from "./map.js"
|
| const checkedKeys = ref<string[]>([]) // 默认选中
|
|
| const treeData = ref<any[]>([
| {
| title: "全部",
| key: 0,
| id: -1,
| children: [
| {
| title: "1号",
| key: 1
| },
| {
| title: "2号",
| key: 2
| },
| {
| title: "3号",
| key: 3
| },
| {
| title: "4号",
| key: 4
| },
| {
| title: "5号",
| key: 5
| },
| {
| title: "6号",
| key: 6
| },
| {
| title: "7号",
| key: 7
| },
| {
| title: "8号",
| key: 8
| },
| {
| title: "9号",
| key: 9
| },
| {
| title: "10号",
| key: 10
| },
| {
| title: "11号",
| key: 11
| },
| {
| title: "12号",
| key: 12
| },
| {
| title: "13号",
| key: 13
| }
| ]
| }
| ])
|
| // 初始化树
| const initTree = () => {
| const tree = treeData.value[0].children
| tree.forEach((element: any) => {
| checkedKeys.value.push(element.key)
|
| })
| }
|
| initTree()
|
| const checkedChange = (keys: string[], checkedNodes: any) => {
| const chilrenAll = checkedNodes.node.children
| const checkedId: number = checkedNodes.node.key
| const ischecked: boolean = checkedNodes.node.checked
| if (chilrenAll && chilrenAll.length >= 12) {
| mapWork.bindShowAll(!ischecked)
| }
|
| mapWork.onChangeGate(checkedId, ischecked)
| }
| </script>
|
|
