# 一、组件封装
<template>
<div>
<div class="mask" v-show="isShowSelect" @click="isShowSelect = !isShowSelect"></div>
<el-popover placement="bottom-start" :width="width" trigger="manual"
v-model="isShowSelect" @hide="popoverHide">
<el-tree class="common-tree" :style="style" ref="tree" :data="data" :props="defaultProps"
:show-checkbox="multiple"
:node-key="nodeKey"
:check-strictly="checkStrictly"
default-expand-all
:expand-on-click-node="false"
:default-checked-keys="defaultCheckedKeys"
:highlight-current="true"
@node-click="handleNodeClick"
@check-change="handleCheckChange"></el-tree>
<el-select :style="selectStyle" slot="reference" ref="select"
v-model="selectedData"
:multiple="multiple"
:nodeindex = 'nodeindex'
clearable
@click.native="isShowSelect =!isShowSelect" class="tree-select">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-popover>
</div>
</template>
<script>
import {getorgantree} from '@/api/organzation';
export default {
name: 'tree-select',
props: {
// 树结构数据
data: {
type: Array,
default () {
return [];
}
},
defaultProps: {
type: Object,
default () {
return {};
}
},
// 配置是否可多选
multiple: {
type: Boolean,
default () {
return false;
}
},
nodeindex:{
type: Number,
default () {
return ;
}
},
nodeKey: {
type: String,
default () {
return 'id';
}
},
// 显示复选框情况下，是否严格遵循父子不互相关联
checkStrictly: {
type: Boolean,
default () {
return false;
}
},
// 默认选中的节点key数组
checkedKeys: {
type: Array,
default () {
return [];
}
},
width: {
type: Number,
default () {
return 420;
}
},
height: {
type: Number,
default () {
return 150;
}
}
},
data () {
return {
defaultCheckedKeys: [],
isShowSelect: false, // 是否显示树状选择器
options: [],
selectedData: [], // 选中的节点
style: {
width: this.width + 'px',
height:this.height + 'px'
},
selectStyle: {
width: this.width + 'px'
},
checkedIds: [],
checkedData: []
};
},
mounted () {
},
methods: {
getTree() {
const _this = this;
getorgantree().then((res) => {
if (res.data.code == 0) {
this.data = res.data.result;
}
})
},
popoverHide () {
if (this.multiple) {
this.checkedIds = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据
this.checkedData = this.$refs.tree.getCheckedNodes(); // 所有被选中的节点所组成的数组数据
} else {
this.checkedIds = this.$refs.tree.getCurrentKey();
this.checkedData = this.$refs.tree.getCurrentNode();
}
this.$emit('activezoom', this.checkedIds, this.checkedData);
},
// 节点被点击时的回调,返回被点击的节点数据
handleNodeClick (data, node) {
console.log('data',data,node)
if (!this.multiple) {
let tmpMap = {};
tmpMap.value = node.key;
tmpMap.label = node.label;
this.options = [];
this.options.push(tmpMap);
this.selectedData = node.label;
this.isShowSelect = !this.isShowSelect;
}
},
// 节点选中状态发生变化时的回调
handleCheckChange () {
var checkedKeys = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据
this.options = checkedKeys.map((item) => {
var node = this.$refs.tree.getNode(item); // 所有被选中的节点对应的node
let tmpMap = {};
tmpMap.value = node.key;
tmpMap.label = node.label;
return tmpMap;
});
this.selectedData = this.options.map((item) => {
return item.label;
});
},
setDefaultKey(keys,title){
if (keys.length > 0) {
this.defaultCheckedKeys = keys;
this.selectedData = title;
}
},
},
watch: {
isShowSelect (val) {
// 隐藏select自带的下拉框
this.$refs.select.blur();
},
}
}
</script>
<style scoped>
.mask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0;
}
.common-tree{
overflow: auto;
}
</style>
<style>
/* .tree-select .el-select__tags .el-tag .el-tag__close{
display: none;
}
.tree-select .el-select__tags .el-tag .el-icon-close{
display: none;
} */
.el-select{
width: 100% !important;
}
.common-tree{
width: 400px !important;
}
</style>
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
# 三、页面引入
# html
<template>
<div class='container'>
<SelectTree :data="leveldata" ref="levealtrees" :defaultProps="activeprops" :multiple='multiple' :nodeKey="activeprops.nodeactive" :checkedKeys="social_leval" @activezoom="activezoom" />
</div>
</template>
1
2
3
4
5
2
3
4
5
# js
<script>
import SelectTrees from '@/components/SelectTree/selecttree'
export default {
name: 'Socialtype',
data() {
return {
leveldata:[], --渲染的数据
social_leval:[], --默认的数据值
activeprops:{ --数据的结构参数
children: "levelTwo",
label: "name",
nodeactive:'id',
},
multiple:false, --是否多选
}
},
methods: {
//监听所选择的值
activezoom(checkedIds, checkedData){
--checkedIds如果是单选的话，获取的是单个字符串，如果是多选的话，就是数组
--checkedData，当前子节点带的对象数据，也就是下一级的数据
this.form.activityLevel = checkedIds
this.social_leval = checkedIds
//this.social_leval.push(checkedIds),
},
}
}
</script>
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
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
# 四、关于回显数据的问题
由于数据的异步，必须是在当前组件的数值渲染进去后，再进行操作 操作方法：
this.$nextTick(() => {
this.$refs.levealtrees.defaultCheckedKeys = []
this.$refs.levealtrees.setDefaultKey(ids,item.names);//获取已经设置的资源后渲染
});
1
2
3
4
2
3
4
--ids所选取的节点相关的父节点和当前节点的id集合
--names所选取的节点相关的父节点和当前节点的名称集合
