|
@@ -1,45 +1,26 @@
|
|
<template>
|
|
<template>
|
|
<div>
|
|
<div>
|
|
- <el-select v-if='!multiple'
|
|
|
|
- v-bind="{...$attrs}"
|
|
|
|
|
|
+ <!-- @focus="onFocus" -->
|
|
|
|
+ <el-select
|
|
|
|
+ v-bind="{ ...$attrs }"
|
|
:value="value"
|
|
:value="value"
|
|
filterable
|
|
filterable
|
|
remote
|
|
remote
|
|
reserve-keyword
|
|
reserve-keyword
|
|
|
|
+ collapse-tags
|
|
clearable
|
|
clearable
|
|
:multiple="multiple"
|
|
:multiple="multiple"
|
|
:placeholder="placeholder"
|
|
:placeholder="placeholder"
|
|
:remote-method="remoteMethod"
|
|
:remote-method="remoteMethod"
|
|
|
|
+ ref="select"
|
|
:loading="loading"
|
|
:loading="loading"
|
|
|
|
+ @focus="onFocus"
|
|
@change="changeValue"
|
|
@change="changeValue"
|
|
:style="{ width: this.selectWidt + 'px!important' }"
|
|
:style="{ width: this.selectWidt + 'px!important' }"
|
|
>
|
|
>
|
|
<el-option
|
|
<el-option
|
|
- v-for="(item, index) in options"
|
|
|
|
- :key="index"
|
|
|
|
- :label="item.userName"
|
|
|
|
- :value="item.userId"
|
|
|
|
- >
|
|
|
|
- </el-option>
|
|
|
|
- </el-select>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- <el-select v-else
|
|
|
|
- v-bind="{...$attrs}"
|
|
|
|
- :value="value"
|
|
|
|
- filterable
|
|
|
|
- remote
|
|
|
|
- reserve-keyword
|
|
|
|
- clearable
|
|
|
|
- :multiple="multiple"
|
|
|
|
- :placeholder="placeholder"
|
|
|
|
- :loading="loading"
|
|
|
|
- @change="changeValue"
|
|
|
|
- :style="{ width: this.selectWidt + 'px!important' }"
|
|
|
|
- >
|
|
|
|
- <el-option
|
|
|
|
- v-for="(item, index) in options"
|
|
|
|
- :key="index"
|
|
|
|
|
|
+ v-for="item in options"
|
|
|
|
+ :key="item.userId"
|
|
:label="item.userName"
|
|
:label="item.userName"
|
|
:value="item.userId"
|
|
:value="item.userId"
|
|
>
|
|
>
|
|
@@ -72,75 +53,77 @@ export default {
|
|
async mounted() {
|
|
async mounted() {
|
|
// this.getList();
|
|
// this.getList();
|
|
// console.log(this.value)
|
|
// console.log(this.value)
|
|
- this.getOptions(this.value|| '' )
|
|
|
|
- // console.log(this.multiple)
|
|
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+ this.getOptions(this.value || "");
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
async getList() {
|
|
async getList() {
|
|
await this.$store.dispatch(this.commit);
|
|
await this.$store.dispatch(this.commit);
|
|
this.list = this.selects[this.enumer[this.commit]];
|
|
this.list = this.selects[this.enumer[this.commit]];
|
|
- const data = {}
|
|
|
|
|
|
+ const data = {};
|
|
for (const item of this.list) {
|
|
for (const item of this.list) {
|
|
- data[item.userId] = item
|
|
|
|
|
|
+ data[item.userId] = item;
|
|
}
|
|
}
|
|
- this.listById = data
|
|
|
|
- if(this.multiple){
|
|
|
|
- this.options =this.list
|
|
|
|
- }else{
|
|
|
|
- this.options =
|
|
|
|
|
|
+ this.listById = data;
|
|
|
|
+
|
|
|
|
+ this.options =
|
|
this.list.length <= this.constant
|
|
this.list.length <= this.constant
|
|
? this.list
|
|
? this.list
|
|
: slice(this.list, 0, this.constant);
|
|
: slice(this.list, 0, this.constant);
|
|
- }
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- // console.log(this.options)
|
|
|
|
|
|
+ this.options = uniqBy(this.options, "userId");
|
|
|
|
+ // console.log(this.options)
|
|
},
|
|
},
|
|
remoteMethod(query) {
|
|
remoteMethod(query) {
|
|
// throttle
|
|
// throttle
|
|
- if(!this.multiple){
|
|
|
|
- throttle(this.getOptions, 800)(query);
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
|
|
+
|
|
|
|
+ throttle(this.getOptions, 800)(query);
|
|
},
|
|
},
|
|
async getOptions(query) {
|
|
async getOptions(query) {
|
|
-
|
|
|
|
- if (query&&query.length>0) {
|
|
|
|
|
|
+ if (query && query.length > 0) {
|
|
let flag;
|
|
let flag;
|
|
- this.options = this.list.filter((item) => {
|
|
|
|
- flag =
|
|
|
|
- item.userName.toLowerCase().indexOf(query.toString().toLowerCase()) > -1 ||
|
|
|
|
- item.userId == query;
|
|
|
|
- if (this.multiple) {
|
|
|
|
- console.log(this.value,this.value.includes(item.userId),item.userId)
|
|
|
|
- return flag || this.value.includes(item.userId);
|
|
|
|
- } else {
|
|
|
|
- // console.log(query,this.value)
|
|
|
|
- return flag || item.userId == this.value;
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
-
|
|
|
|
|
|
+ this.options = uniqBy(
|
|
|
|
+ this.list.filter((item) => {
|
|
|
|
+ flag =
|
|
|
|
+ item.userName
|
|
|
|
+ .toLowerCase()
|
|
|
|
+ .indexOf(query.toString().toLowerCase()) > -1 ||
|
|
|
|
+ item.userId == query;
|
|
|
|
+ if (this.multiple) {
|
|
|
|
+ return flag || this.value.includes(item.userId);
|
|
|
|
+ } else {
|
|
|
|
+ // console.log(query,this.value)
|
|
|
|
+ return flag || item.userId == this.value;
|
|
|
|
+ }
|
|
|
|
+ }),
|
|
|
|
+ "userId"
|
|
|
|
+ );
|
|
} else {
|
|
} else {
|
|
- try{
|
|
|
|
- await this.getList()
|
|
|
|
- const optionids = this.options.map(item => item.userId)
|
|
|
|
- const valueItem = this.listById[this.value]
|
|
|
|
|
|
+ try {
|
|
|
|
+ await this.getList();
|
|
|
|
+ const optionids = this.options.map((item) => item.userId);
|
|
|
|
+
|
|
|
|
+ const valueItem = this.listById[this.value];
|
|
if (!optionids.includes(this.value) && valueItem) {
|
|
if (!optionids.includes(this.value) && valueItem) {
|
|
- this.options.push(valueItem)
|
|
|
|
- this.options = uniqBy(this.options, 'userId')
|
|
|
|
- }
|
|
|
|
- }catch(e){
|
|
|
|
- // console.log(e)
|
|
|
|
|
|
+ this.options.push(valueItem);
|
|
|
|
+ this.options = uniqBy(this.options, "userId");
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+ } catch (e) {
|
|
|
|
+ // console.log(e)
|
|
|
|
+ }
|
|
}
|
|
}
|
|
},
|
|
},
|
|
changeValue(val) {
|
|
changeValue(val) {
|
|
this.isFirst = false;
|
|
this.isFirst = false;
|
|
this.$emit("input", val);
|
|
this.$emit("input", val);
|
|
this.$emit("change", val);
|
|
this.$emit("change", val);
|
|
|
|
+ // console.log('来了',this.$refs.select.query)
|
|
|
|
+ this.$nextTick((res) => {
|
|
|
|
+ this.getOptions(this.$refs.select.query);
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ onFocus() {
|
|
|
|
+ this.$nextTick((res) => {
|
|
|
|
+ this.getOptions(this.$refs.select.query);
|
|
|
|
+ });
|
|
},
|
|
},
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
@@ -156,17 +139,16 @@ export default {
|
|
immediate: true,
|
|
immediate: true,
|
|
deep: true,
|
|
deep: true,
|
|
handler(val) {
|
|
handler(val) {
|
|
-
|
|
|
|
- if (this.multiple) {
|
|
|
|
- if (val?.length > 0 && this.isFirst) {
|
|
|
|
-
|
|
|
|
- this.getOptions()
|
|
|
|
|
|
+ // && this.isFirst
|
|
|
|
+ if (this.multiple && this.isFirst) {
|
|
|
|
+ if (val?.length > 0) {
|
|
|
|
+ this.getOptions();
|
|
}
|
|
}
|
|
} else {
|
|
} else {
|
|
if (val && this.isFirst) {
|
|
if (val && this.isFirst) {
|
|
- this.getOptions()
|
|
|
|
- }else{
|
|
|
|
- this.getOptions(val)
|
|
|
|
|
|
+ this.getOptions();
|
|
|
|
+ } else {
|
|
|
|
+ this.getOptions(val);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|