展示效果圖
在公共處寫下自己定義樹 (el-tree-select)
<template>
<el-tooltip class="item" effect="dark" :disabled="isEmpty(labelText)" placement="top-start">
<div slot="content">{{ getTooltipStr(labelText) }}</div>
<el-select
v-model="labelText"
class="del-none"
v-bind="$attrs"
:filter-method="handleSelectFilter"
style="width: 100%;"
:multiple="multiple"
@clear="handleClear"
v-on="$listeners"
>
<el-option :value="node">
<el-tree
id="tree-options"
ref="Tree4Select"
:accordion="accordion"
:data="treeData"
:props="props"
:node-key="props.value"
:default-expanded-keys="defaultExpandedKey"
:filter-node-method="handleNodeFilter"
:show-checkbox="multiple"
@node-click="handleNodeClick"
@check="handleCheck"
/>
</el-option>
</el-select>
</el-tooltip>
</template>
<script>
const isEmpty = require('lodash/isEmpty');
export default {
name: 'ElTreeSelect',
props: {
// 配置選項
props: {
type: Object,
default: function() {
return {
value: 'value', // 實際值對應的屬性
label: 'label', // 顯示值對應的屬性
children: 'childrenNodes', // 子節點集合對應的屬性
};
},
},
multiple: { type: Boolean },
// 構建樹的數據對象
treeData: { type: Array, required: true },
accordion: { type: Boolean, default: false },
// 用於同步數據，初始數據
value: [String, Array],
leafOnly: { type: Boolean, default: false }, // 是否只是葉子節點，默認值為 false
includeHalfChecked: { type: Boolean, default: false }, // 是否包含半選節點，默認值為 false
},
data() {
return {
filterText: '',
theValue: this.value, // 初始值
labelText: [String, Array],
defaultExpandedKey: [],
node: [Object, Array],
};
},
watch: {
treeData() {
this.init();
},
},
mounted() {
this.init();
},
methods: {
// 初始化值
init() {
if (!isEmpty(this.treeData) && this.theValue) {
this.$refs.Tree4Select.setCheckedKeys(this.multiple ? this.theValue : [this.theValue]); // 設置默認選中
const res = this.$refs.Tree4Select.getCheckedNodes(false, false); // 這里兩個true，1. 是否只是葉子節點 2. 是否包含半選節點（就是使得選擇的時候不包含父節點）
this.defaultExpandedKey = this.multiple ? this.theValue : [this.theValue]; // 設置默認展開
if (this.multiple) {
this.$nextTick(() => {
this.handleCheckChange();
});
}
}
},
// 節點點擊事件
handleNodeClick(node) {
if (!this.multiple) {
this.labelText = node[this.props.label];
this.theValue = node[this.props.value];
this.$emit('input', this.theValue);
this.defaultExpandedKey = [];
}
},
// 清空選項事件
handleClear() {
this.labelText = this.multiple ? [] : '';
this.theValue = this.multiple ? [] : '';
this.defaultExpandedKey = [];
this.$refs.Tree4Select.setCheckedKeys([]);
this.$emit('input', this.theValue);
},
handleSelectFilter(val) {
if (this.$attrs.filterable) {
this.$refs.Tree4Select.filter(val);
}
},
handleNodeFilter(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
handleCheck(checkedNodes, checkedKeys) {
this.handleCheckChange();
this.$emit('input', this.theValue);
},
handleCheckChange() {
const res = this.$refs.Tree4Select.getCheckedNodes(this.leafOnly, this.includeHalfChecked); // 這里兩個true，1. 是否只是葉子節點 2. 是否包含半選節點（就是使得選擇的時候不包含父節點）
const arrLabel = [];
const arr = [];
const valueArr = [];
res.forEach(item => {
arrLabel.push(item[this.props.label]);
arr.push(item);
valueArr.push(item[this.props.value]);
});
this.node = arr;
this.labelText = arrLabel;
this.theValue = valueArr;
this.$emit('change', this.theValue);
},
getTooltipStr(val) {
let data = '';
if (val.constructor === Array) {
if (val.length !== 0) {
data = val.join(',');
}
}
if (val.constructor === String) {
data = val;
}
return data;
},
isEmpty(val) {
return isEmpty(val);
},
getCheckedNodes(leafOnly, includeHalfChecked) {
return this.$refs.Tree4Select.getCheckedNodes(leafOnly, includeHalfChecked);
},
},
};
</script>
<style lang="scss" scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
height: auto;
padding: 0;
overflow: hidden;
}
.el-select-dropdown__item.selected {
font-weight: normal;
}
.el-tag__close {
display: none;
}
.del-none {
/deep/ .el-tag__close.el-icon-close {
display: none;
}
}
/deep/.el-select__tags-text {
display: inline-block;
max-width: 80px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
<style lang="scss">
.el-select-dropdown.el-popper {
.el-scrollbar {
overflow: hidden;
}
}
</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
調用 el-tree-select 樹
// 引用樹的結構
<el-form-item label="選擇人員">
<el-tree-select
v-model="treeValue"
:tree-data="departmentPeopleTrees"
multiple
:props="treeIds"
collapse-tags
clearable
/>
</el-form-item>
import ElTreeSelect from '@/views/mm/commonComponent/components/TreeSelect';
script>
export default {
data() {
return {
// 樹顯示的值
departmentPeopleTrees: [],
// 多選后的值
treeValue: [],
// tree 值的格式(可以自己定義,后台是怎么樣就怎么樣)
treeIds: {
value: 'id', // 實際值對應的屬性
label: 'label', // 顯示值對應的屬性
children: 'children', // 子節點集合對應的屬性},
},
};
},
// 樹引用
components: {
ElTreeSelect,
},
methods: {
// 獲取樹的值(鈎子函數)
selectTree(val) {
const exchangeId = val;
queryDepartmentPeople({
exchangeId: exchangeId,
}).then(response => {
this.departmentPeopleTrees = response.data.data;
});
},
}
};
</script>
————————————————
版權聲明：本文為CSDN博主「localhost-9527」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_40001125/article/details/106539536