on utilise vue select pour les tetes de colonnes
This commit is contained in:
parent
d507f4136f
commit
e9f70ec13e
2 changed files with 50 additions and 30 deletions
|
@ -190,7 +190,7 @@ let monTableau = {
|
||||||
crayons: [],
|
crayons: [],
|
||||||
classes: [],
|
classes: [],
|
||||||
filtreCol: [],
|
filtreCol: [],
|
||||||
filtreColSelected: [],
|
filtreColSelected: { gestionnaire: [] },
|
||||||
filtreColModif: 0,
|
filtreColModif: 0,
|
||||||
filtreColVal: {},
|
filtreColVal: {},
|
||||||
search: '',
|
search: '',
|
||||||
|
@ -239,6 +239,7 @@ let monTableau = {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
Object.keys(this.filtreColSelected).forEach((colName) => {
|
Object.keys(this.filtreColSelected).forEach((colName) => {
|
||||||
|
console.log('coucou');
|
||||||
if (rsearch) {
|
if (rsearch) {
|
||||||
let colValue = this.filtreColSelected[colName];
|
let colValue = this.filtreColSelected[colName];
|
||||||
if (!Array.isArray(colValue)) {
|
if (!Array.isArray(colValue)) {
|
||||||
|
@ -341,6 +342,20 @@ let monTableau = {
|
||||||
if (config.classes !== undefined) {
|
if (config.classes !== undefined) {
|
||||||
this.classes = config.classes;
|
this.classes = config.classes;
|
||||||
}
|
}
|
||||||
|
if (config.filtreCol !== undefined) {
|
||||||
|
this.filtreCol = config.filtreCol;
|
||||||
|
this.filtreCol.forEach((col) => {
|
||||||
|
let Tval = [''];
|
||||||
|
this.table.forEach((t) => {
|
||||||
|
let valCol = t.html[col];
|
||||||
|
if (Tval.indexOf(valCol) === -1) {
|
||||||
|
Tval.push(valCol);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.filtreColVal[col] = Tval;
|
||||||
|
this.filtreColSelected[col] = [];
|
||||||
|
});
|
||||||
|
}
|
||||||
this.table = data;
|
this.table = data;
|
||||||
if (data.length && data[0].search) {
|
if (data.length && data[0].search) {
|
||||||
this.champ_search = 'search';
|
this.champ_search = 'search';
|
||||||
|
@ -384,6 +399,7 @@ let monTableau = {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.filtreColVal[col] = Tval;
|
this.filtreColVal[col] = Tval;
|
||||||
|
this.filtreColSelected[col] = [];
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
Vue.nextTick(() => {
|
Vue.nextTick(() => {
|
||||||
|
@ -487,15 +503,6 @@ let monTableau = {
|
||||||
},
|
},
|
||||||
template: `
|
template: `
|
||||||
<div class="gamutable">
|
<div class="gamutable">
|
||||||
<div>
|
|
||||||
<vue-select
|
|
||||||
v-model="model"
|
|
||||||
:options="options"
|
|
||||||
hide-selected
|
|
||||||
multiple
|
|
||||||
taggable
|
|
||||||
></vue-select>
|
|
||||||
</div>
|
|
||||||
<div class="gamutable--surTable">
|
<div class="gamutable--surTable">
|
||||||
<select id="parPage" v-model="parPageSelect">
|
<select id="parPage" v-model="parPageSelect">
|
||||||
<option v-for="v in tparpage" :key="v">{{v}}</option>
|
<option v-for="v in tparpage" :key="v">{{v}}</option>
|
||||||
|
@ -560,24 +567,14 @@ let monTableau = {
|
||||||
<tr v-if="filtreCol.length" class="filtreColonne">
|
<tr v-if="filtreCol.length" class="filtreColonne">
|
||||||
<th v-for="(label,head,i) in header" :key="'filtreCol_'+i">
|
<th v-for="(label,head,i) in header" :key="'filtreCol_'+i">
|
||||||
<div v-if="filtreCol.indexOf(head) !== -1" :id="'filtreCol_'+head">
|
<div v-if="filtreCol.indexOf(head) !== -1" :id="'filtreCol_'+head">
|
||||||
<select class="filtrerCol" v-model="filtreColSelected[head]" v-if="filtrecolmulti !== 'non'" multiple>
|
<vue-select
|
||||||
<option
|
v-model="filtreColSelected[head]"
|
||||||
v-for="(option,j) in filtreColVal[head]"
|
:options="filtreColVal[head]"
|
||||||
:value="option"
|
hide-selected
|
||||||
@click="selectValCol"
|
multiple
|
||||||
>
|
taggable
|
||||||
{{j === 0 ? "Tous" : option}}
|
@selected="selectValCol"
|
||||||
</option>
|
></vue-select>
|
||||||
</select>
|
|
||||||
<select class="filtrerCol" v-model="filtreColSelected[head]" v-else>
|
|
||||||
<option
|
|
||||||
v-for="(option,j) in filtreColVal[head]"
|
|
||||||
:value="option"
|
|
||||||
@click="selectValCol"
|
|
||||||
>
|
|
||||||
{{j === 0 ? "Tous" : option}}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
</div>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue