el-select 支持多选 搜索远程数据 组件抽取

el-select 支持多选 搜索远程数据 组件抽取

• 使用方式

import selectView from './components/selectView'

<el-form>
  <el-form-item label="选择器">
    <selectView v-model="selValue" @change="handleChange">
  </el-form-item>
</el-form>
1
2
3
4
5
6
7

• 组件

 <template>
	<el-select
		v-model="selectValue"
		:multiple="multiple"
		:filterable="true"
		:remote="true"
		@focus="selectFocus"
		:clearable="true"
		:placeholder="placeholder"
		:remote-method="remoteMethod"
		:loading="selectLoading"
		@change="handleChange"
		style="width: 100%;"
	>
		<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">el-option>
	el-select>
template>
<script>
import { userListAll } from "@/utils/api.js";
export default {
	props: {
		// v-model绑定 返回 1,2,3 或 传入 1,2,3 id值
		value: {
			type: [String, Number],
			default: "",
		},
		placeholder: {
			type: String,
			default: "请选择",
		},
		multiple: {
			type: Boolean,
			default: true,
		},
	},
	computed: {
		currentValue: {
			get: function() {
				if (this.value) {
					return this.value.split(",");
				}
				return [];
			},
			set: function(val) {
				this.$emit("input", val.join(","));
			},
		},
	},

	data() {
		return {
			selectValue: "",
			options: [], //存储下拉框的数据
			selectEnterpriseForm: {
				nickName: "",
			},
			selectLoading: false,
		};
	},

	mounted() {
		this.selectEnterprise("");
	},

	methods: {
		selectEnterprise(query) {
			//query用户搜索的值
			this.selectEnterpriseForm = this.$options.data().selectEnterpriseForm; //清空数据
			this.selectEnterpriseForm.nickName = query;

			userListAll({
				...this.selectEnterpriseForm,
			})
				.then(res => {
					this.options = [];
					this.selectLoading = false;
					this.addLoading = false;
					res.data.forEach(element => {
						this.options.push({
							value: element.userId + "",
							label: element.nickName,
						});
					});

					if (this.currentValue.length > 0) {
						this.selectValue = this.currentValue;
					}
				})
				.catch(err => {});
		},
		remoteMethod(query) {
			this.selectLoading = true;
			this.selectEnterprise(query);
		},
		selectFocus() {
			this.options = [];
			this.selectLoading = true;
			this.selectEnterprise("");
		},
		handleChange(val) {
			this.currentValue = val;
			let nameList = [];
			val.forEach(item => {
				this.options.forEach(element => {
					if (item == element.value) {
						nameList.push(element.label);
					}
				});
			});
			// 将1,2,3 和 张三,李四,王五 返回
			this.$emit("change", val.join(","), nameList.join(","));
		},
	},
};
script>
<style lang="scss" scoped>
// .con {
// 	display: inline-block;
// 	width: 100%;
// }
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