html
复制代码
<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>