on ajoute dans le select une option select multi, par defaut select simple
This commit is contained in:
parent
e287386eac
commit
bc2556cbd7
3 changed files with 105 additions and 49 deletions
|
@ -14,6 +14,7 @@
|
|||
urlvuebloc="[(#ENV{urlvuebloc})]"
|
||||
url_sort_asc="#ENV{sort_asc,#GET{sort_asc}}"
|
||||
url_sort_desc="#ENV{sort_desc,#GET{sort_desc}}"
|
||||
filtrecolmulti="#ENV{filtrecolmulti,non}"
|
||||
ref="montableau"
|
||||
></mon-tableau>
|
||||
</div>
|
||||
|
@ -32,6 +33,7 @@
|
|||
urlvuebloc="[(#ENV{urlvuebloc_deux})]"
|
||||
url_sort_asc="[(#ENV{sort_asc,#GET{sort_asc}})]"
|
||||
url_sort_desc="[(#ENV{sort_desc,#GET{sort_desc}})]"
|
||||
filtrecolmulti="[(#ENV{filtrecolmulti,non})]"
|
||||
ref="montableau"
|
||||
></mon-tableau>
|
||||
</div>
|
||||
|
|
|
@ -179,6 +179,9 @@ let monTableau = {
|
|||
type: String,
|
||||
default: 'tableau',
|
||||
},
|
||||
filtrecolmulti: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
|
@ -236,8 +239,11 @@ let monTableau = {
|
|||
Object.keys(this.filtreColSelected).forEach((colName) => {
|
||||
if (rsearch) {
|
||||
let colValue = this.filtreColSelected[colName];
|
||||
if (colValue) {
|
||||
if (ligne.search[colName] !== colValue) {
|
||||
if (!Array.isArray(colValue)) {
|
||||
colValue = [colValue];
|
||||
}
|
||||
if (colValue.filter((w) => w.length > 0).length) {
|
||||
if (colValue.filter((w) => w.length > 0).indexOf(ligne.search[colName]) === -1) {
|
||||
rsearch = false;
|
||||
}
|
||||
}
|
||||
|
@ -273,21 +279,26 @@ let monTableau = {
|
|||
localStorage.setItem(this.nameLocalStorage, JSON.stringify($table));
|
||||
},
|
||||
tableau() {
|
||||
this.filtreCol.forEach((col) => {
|
||||
let Tval = [''];
|
||||
this.tableau.forEach((t) => {
|
||||
let valCol = t.search[col];
|
||||
if (Tval.indexOf(valCol) === -1) {
|
||||
Tval.push(valCol);
|
||||
this.filtreColValOk = true;
|
||||
}
|
||||
});
|
||||
this.filtreColVal[col] = Tval;
|
||||
});
|
||||
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
// Si on veut filtrer la liste des options dynamique en fonction
|
||||
// du tri du tableau
|
||||
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
//this.filtreCol.forEach((col) => {
|
||||
//let Tval = [''];
|
||||
//this.tableau.forEach((t) => {
|
||||
//let valCol = t.search[col];
|
||||
//if (Tval.indexOf(valCol) === -1) {
|
||||
//Tval.push(valCol);
|
||||
//this.filtreColValOk = true;
|
||||
//}
|
||||
//});
|
||||
//this.filtreColVal[col] = Tval;
|
||||
//});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
selectValCol() {
|
||||
//console.log(this.filtreColSelected);
|
||||
this.filtreColModif++;
|
||||
},
|
||||
calculer_nameLocalStorage() {
|
||||
|
@ -346,6 +357,16 @@ let monTableau = {
|
|||
}
|
||||
if (config.filtreCol !== undefined) {
|
||||
this.filtreCol = config.filtreCol;
|
||||
this.filtreCol.forEach((col) => {
|
||||
let Tval = [''];
|
||||
this.table.forEach((t) => {
|
||||
let valCol = t.search[col];
|
||||
if (Tval.indexOf(valCol) === -1) {
|
||||
Tval.push(valCol);
|
||||
}
|
||||
});
|
||||
this.filtreColVal[col] = Tval;
|
||||
});
|
||||
}
|
||||
Vue.nextTick(() => {
|
||||
this.chargement = false;
|
||||
|
@ -512,7 +533,16 @@ let monTableau = {
|
|||
<tr v-if="filtreCol.length" class="filtreColonne">
|
||||
<th v-for="(label,head,i) in header" :key="'filtreCol_'+i">
|
||||
<div v-if="filtreCol.indexOf(head) !== -1" :id="'filtreCol_'+head">
|
||||
<select class="filtrerCol" v-model="filtreColSelected[head]">
|
||||
<select class="filtrerCol" v-model="filtreColSelected[head]" v-if="filtrecolmulti !== 'non'" multiple>
|
||||
<option
|
||||
v-for="(option,j) in filtreColVal[head]"
|
||||
:value="option"
|
||||
@click="selectValCol"
|
||||
>
|
||||
{{j === 0 ? "Tous" : option}}
|
||||
</option>
|
||||
</select>
|
||||
<select class="filtrerCol" v-model="filtreColSelected[head]" v-else>
|
||||
<option
|
||||
v-for="(option,j) in filtreColVal[head]"
|
||||
:value="option"
|
||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue