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
| <!-- -->
| <template>
| <div class="boxleft">
| <title-box-vue title="功能位置"> </title-box-vue>
| <fks-input placeholder="输入关键字进行过滤" suffix-icon="fks-icon-search" v-model="filterText">
| </fks-input>
| <fks-tree
| ref="tree"
| :data="treedata"
| :props="defaultProps"
| :show-icon="true"
| default-expand-all
| node-key="id"
| current-node-key="1"
| :highlight-current="true"
| :filter-node-method="filterNode"
| @node-click="handleNodeClick"
| ></fks-tree>
| </div>
| </template>
|
| <script>
| import titleBoxVue from "./titleBox.vue";
|
| const treeData = [
| {
| label: "泵站",
| id:'s1',
| children: [
| {
| id:'1',
| label: "1#泵",
| },
| {
| id:'2',
| label: "2#泵",
| },
| {
| id:'3',
| label: "3#泵",
| },
| {
| id:'4',
| label: "4#泵",
| },
| {
| id:'5',
| label: "5#泵",
| },
| ],
| },
|
| ];
| export default {
| name: "leftTree",
| components: { titleBoxVue },
| data() {
| return {
| treedata: treeData,
| filterText: "",
| defaultProps: {
| children: "children",
| label: "label",
| },
| };
| },
| created() {},
| mounted() {},
| computed: {},
| watch: {
| filterText(val) {
| this.$refs.tree.filter(val);
| },
| },
| methods: {
| handleNodeClick(data) {
| // console.log(data, 74);
| this.$emit("click", data);
| },
| filterNode(value, data) {
| if (!value) return true;
| return data.label.indexOf(value) !== -1;
| },
| },
| };
| </script>
| <style scoped>
| .boxleft{
| background-color: #fff;
| }
| </style>
|
|
