on ajoute l'autocomplete dans le select
This commit is contained in:
parent
f9a3d44193
commit
e3845cc3a7
2 changed files with 48 additions and 2 deletions
|
@ -210,6 +210,8 @@ let monTableau = {
|
||||||
vuebloc: '',
|
vuebloc: '',
|
||||||
model: [],
|
model: [],
|
||||||
options: ['Jest', 'Mocha', 'Selenium', 'Puppeteer', 'Jasmine', 'Karma'],
|
options: ['Jest', 'Mocha', 'Selenium', 'Puppeteer', 'Jasmine', 'Karma'],
|
||||||
|
searchInputHead: '',
|
||||||
|
searchInputVal: '',
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
@ -223,6 +225,19 @@ let monTableau = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
filtreColVal_visible: function () {
|
||||||
|
let head = this.searchInputHead;
|
||||||
|
let val = this.searchInputVal;
|
||||||
|
if (!head) {
|
||||||
|
return this.filtreColVal;
|
||||||
|
} else {
|
||||||
|
let filtreColVal_visible = {};
|
||||||
|
filtreColVal_visible[head] = this.filtreColVal[head].filter((v) => {
|
||||||
|
return v.indexOf(val) !== -1;
|
||||||
|
});
|
||||||
|
return filtreColVal_visible;
|
||||||
|
}
|
||||||
|
},
|
||||||
tableau: function () {
|
tableau: function () {
|
||||||
this.setPages();
|
this.setPages();
|
||||||
if (!this.search && !this.filtreColModif) {
|
if (!this.search && !this.filtreColModif) {
|
||||||
|
@ -331,8 +346,14 @@ let monTableau = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
hanldeSearchInput(event, head) {
|
||||||
|
this.searchInputHead = head;
|
||||||
|
this.searchInputVal = event.target.value;
|
||||||
|
},
|
||||||
selectValCol() {
|
selectValCol() {
|
||||||
this.filtreColModif++;
|
this.filtreColModif++;
|
||||||
|
this.searchInputVal = '';
|
||||||
|
this.searchInputHead = '';
|
||||||
},
|
},
|
||||||
calculer_nameLocalStorage() {
|
calculer_nameLocalStorage() {
|
||||||
if (this.apiuri) {
|
if (this.apiuri) {
|
||||||
|
@ -593,11 +614,14 @@ let monTableau = {
|
||||||
v-if="filtreColType[head] === 'select'"
|
v-if="filtreColType[head] === 'select'"
|
||||||
v-model="filtreColSelected[head]"
|
v-model="filtreColSelected[head]"
|
||||||
:options="filtreColVal[head]"
|
:options="filtreColVal[head]"
|
||||||
|
:visible-options="filtreColVal_visible[head]"
|
||||||
hide-selected
|
hide-selected
|
||||||
multiple
|
multiple
|
||||||
taggable
|
taggable
|
||||||
close-on-select
|
close-on-select
|
||||||
|
searchable
|
||||||
@selected="selectValCol"
|
@selected="selectValCol"
|
||||||
|
@search:input="hanldeSearchInput($event, head)"
|
||||||
></vue-select>
|
></vue-select>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue