调用自定义的 el-tree-select (elementUI)
展示效果图
在公共处写下自己定义树 (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
