Comment changer la valeur affichée dans les éléments de filtre de l'interface utilisateur (entrée, liste déroulante, etc.) dans vue-good-table par programmation?
Par exemple, si j'appelle:
this. $ set (this.table.columnsFilters, 'name', 'bob')
Je souhaite que la valeur du champ de saisie HTML "nom" affiche bob.
Malheureusement, la définition des valeurs comme je l'ai décrit ci-dessus ne fonctionne pas
3 Réponses :
Vue ne peut pas détecter les ajouts de propriété normaux (par exemple this.myObject.newProperty = 'hi' )
Par conséquent, utilisez this. $ set (this.table.columnsFilters, 'name', 'bob') au lieu de votre code.
ceci doit être marqué comme la bonne réponse, voici un exemple fonctionnel: jsfiddle.net/aks9800/cyegzwL7
@xaksis ... soupir .... github.com/ xaksis / vue-good-table / issues /… dans la version 2.16.0+, le bogue de comparaison que vous aviez dans le code (que vous aviez initialement déclaré à plusieurs reprises n'avait rien à voir avec votre code) empêchait cela ... si vous définissez la valeur sur une chaîne vide, vous n'avez PAS à utiliser $ set ........ seulement après avoir supprimé le bogue.
Edit Si vous utilisez la version 2.16.0 ou supérieure, vous devrez faire ceci:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-good-table@2.15.3/dist/vue-good-table.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-good-table@2.12.2/dist/vue-good-table.css" rel="stylesheet"/>
<div id="app">
<div>
<div style="margin:10px 10px 10px 10px;">
<button
style="width:200px;"
@click.stop="changeFilter('name', 'Bob')"
>Click To Change Name Filter</button>
<button
style="width:200px;"
@click.stop="clearFilter('name')"
>Clear Name Filter</button>
</div>
<vue-good-table :columns="columns" :rows="rows" />
</div>
</div>Réponse d'origine
Si je comprends bien, vous souhaitez définir le filtre pour un champ par programmation ... Quelque chose comme ça devrait fonctionner .. Cliquez sur le bouton pour changer le filtre par programme ... Si vous remplacez cette ligne par un nom valide, il filtrera par ce nom ... Remplacez «Bob» par un nom valide ... (comme Dan) ...
const vm = new Vue({
el: "#app",
name: "my-component",
data: {
columns: [
{
label: "Name",
field: "name",
filterOptions: {
enabled: true, // enable filter for this column
placeholder: "Filter Name", // placeholder for filter input
filterValue: "", // initial populated value for this filter
filterDropdownItems: [], // dropdown (with selected values) instead of text input
filterFn: this.columnFilterFn, //custom filter function that
trigger: "enter" //only trigger on enter not on keyup
}
},
{
label: "Age",
field: "age",
type: "number"
},
{
label: "Created On",
field: "createdAt",
type: "date",
dateInputFormat: "YYYY-MM-DD",
dateOutputFormat: "MMM Do YY"
},
{
label: "Percent",
field: "score",
type: "percentage"
}
],
rows: [
{
id: 1,
name: "John",
age: 20,
createdAt: "201-10-31:9: 35 am",
score: 0.03343
},
{
id: 2,
name: "Jane",
age: 24,
createdAt: "2011-10-31",
score: 0.03343
},
{
id: 3,
name: "Susan",
age: 16,
createdAt: "2011-10-30",
score: 0.03343
},
{
id: 4,
name: "Bob",
age: 55,
createdAt: "2011-10-11",
score: 0.03343
},
{
id: 5,
name: "Dan",
age: 40,
createdAt: "2011-10-21",
score: 0.03343
},
{
id: 6,
name: "John",
age: 20,
createdAt: "2011-10-31",
score: 0.03343
}
]
},
methods: {
clearFilter(field) {
try {
let found = this.columns.find((c) => {
return c.field == field
});
found.filterOptions.filterValue = "";
} catch {
alert(`Unable to clear ${field} filter`)
}
},
changeFilter(field, newFilter) {
let found = this.columns.find((c) => {
return c.field == field
});
if(found) {
if(found.hasOwnProperty("filterOptions")) {
if(found.filterOptions.hasOwnProperty("filterValue")) {
found.filterOptions.filterValue = newFilter;
} else {
alert(`Column '${field}' does not have filterValue property!`)
}
} else {
alert(`Column '${field}' does not have filtering configured!`)
}
} else {
alert(`Field '${field}' does not exist!`)
}
}
}
});
<button
style="width:200px;"
@click.stop="changeFilter('name', 'Bob')"
>Click To Change Name Filter</button>
// v2.16.0 or higher
...
changeFilter(field, newFilter) {
let newCols = JSON.parse(JSON.stringify(this.columns));
let found = newCols.find(c => {
return c.field == field;
});
console.log(found);
if (found) {
if (found.hasOwnProperty("filterOptions")) {
found.filterOptions.filterValue = newFilter;
this.columns = newCols;
} else {
alert(`Column '${field}' does not have filtering configured!`);
}
} else {
alert(`Field '${field}' does not exist!`);
}
}
ne fonctionne pas dans vue-good-table 2.16.x, avez-vous une idée pourquoi?
@paul bien c'est ennuyeux - j'ai essayé quelques choses en utilisant la version la plus récente, mais en vain. Ce serait peut-être bénéfique si vous posiez un problème sur leur dépôt GitHub? Peut-être un bug de leur côté?
@paul - J'ai mis à jour ma réponse avec une solution de travail pour v2.16.0 +
Voir: https://github.com/xaksis/vue-good -table / issues / 475
Méthode officielle recommandée pour effectuer cette opération pour version> = 2.17.5 :
for (var key in this.$route.query){
var field = key;
let foundIndex = this.columns.findIndex((c) => {
return c.field == field
});
if (foundIndex !== -1 ){
this.$set(this.columns[foundIndex].filterOptions, 'filterValue', this.$route.query[key]);
}
}
Si vous voulez le faire en utilisant les paramètres de requête $ route:
this.$set(this.columns[foundIndex].filterOptions, 'filterValue', value);
Je ne comprends pas ce que vous entendez par "Je veux que la valeur du champ de saisie HTML 'nom' affiche bob. Au lieu de cela, mes données sont filtrées par bob ..." Faites-vous référence à un texte d'espace réservé similaire?
Jakobovski - pouvez-vous expliquer ce que vous voulez dire?
@MattOestreich j'ai ajouté une clarification
Vous souhaitez donc modifier par programme le filtre actuel d'une colonne?
@MattOestreich. Oui, mais il y a une différence entre le filtre et la valeur affichée dans l'interface utilisateur, c'est pourquoi je mentionne spécifiquement la valeur de l'interface utilisateur. Habituellement, cela devrait être le même, mais ce que j'ai trouvé c'est que parfois la valeur du filtre n'est pas identique à la valeur affichée dans l'interface utilisateur.
Ma solution est-elle utile ou manque-t-elle la cible?
@MattOestreich. Je vous recontacterai dimanche je n'ai pas encore eu le temps de vérifier