J'essaie d'utiliser ceci https://github.com/matfish2/vue-tables-2 avec Vue 2.1.8.
Et cela fonctionne parfaitement MAIS je dois utiliser des filtres personnalisés pour formater certains champs en fonction de leur valeur, etc.
Dans les options, j'ai ceci:
customFilters: [
{
name:'count',
callback: function(row, query) {
console.log('see me?'); // Not firing this
return row.count[0] == query;
}
}
]
Dans la documentation, il est dit que je dois faire ceci:
Using the event bus:
Event.$emit('vue-tables.filter::count', query);
Mais je ne sais pas où mettre ça? J'ai essayé beaucoup d'endroits. Par exemple, dans mon rappel de succès axios mais rien.
Je suppose que c'est très basique et que je devrais le savoir, mais ce n'est pas le cas. Donc, si quelqu'un pouvait me dire où mettre cet événement, le personnel de bus serait génial!
Les docs pourraient décrire cela mieux. C'est un peu difficile à comprendre.
Vous devez importer l'export nommé Event
de vue-tables-2 pour disposer du bus d'événement de la table et émettre l'événement personnalisé dans votre gestionnaire de clics personnalisé.
Dans la démo, il est disponible sur un objet global. Dans ES6, vous l'importerez comme décrit dans la documentation avec import {ServerTable, ClientTable, Event} from 'vue-tables-2';
S'il vous plaît jeter un oeil à la démo de filtre alphabet ci-dessous ou dans ce violon .
La démo est similaire au violon de démonstration de tables-1-que vous pouvez trouver ici .
// Vue.use(VueTables)
const ClientTable = VueTables.ClientTable
const Event = VueTables.Event // import eventbus
console.log(VueTables);
Vue.use(ClientTable)
new Vue({
el: "#people",
methods: {
applyFilter(letter) {
this.selectedLetter = letter;
Event.$emit('vue-tables.filter::alphabet', letter);
}
},
data() {
return {
letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
selectedLetter: '',
columns: ['id', 'name', 'age'],
tableData: [{
id: 1,
name: "John",
age: "20"
}, {
id: 2,
name: "Jane",
age: "24"
}, {
id: 3,
name: "Susan",
age: "16"
}, {
id: 4,
name: "Chris",
age: "55"
}, {
id: 5,
name: "Dan",
age: "40"
}],
options: {
// see the options API
customFilters: [{
name: 'alphabet',
callback: function(row, query) {
return row.name[0] == query;
}
}]
}
}
}
});
#people {
text-align: center;
width: 95%;
margin: 0 auto;
}
h2 {
margin-bottom: 30px;
}
th,
td {
text-align: left;
}
th:nth-child(n+2),
td:nth-child(n+2) {
text-align: center;
}
thead tr:nth-child(2) th {
font-weight: normal;
}
.VueTables__sort-icon {
margin-left: 10px;
}
.VueTables__dropdown-pagination {
margin-left: 10px;
}
.VueTables__highlight {
background: yellow;
font-weight: normal;
}
.VueTables__sortable {
cursor: pointer;
}
.VueTables__date-filter {
border: 1px solid #ccc;
padding: 6px;
border-radius: 4px;
cursor: pointer;
}
.VueTables__filter-placeholder {
color: #aaa;
}
.VueTables__list-filter {
width: 120px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-tables-2.min.js"></script>
<div id="people">
<button @click="applyFilter(letter)" class="btn btn-default" v-for="letter in letters" :class="{active: letter==selectedLetter}">
{{letter}}
</button>
<button class="btn btn-default" @click="applyFilter('')">
clear
</button>
<v-client-table :data="tableData" :columns="columns" :options="options"></v-client-table>
</div>
J'ai trouvé cette leçon pour m'aider au mieux. https://github.com/ratiw/vuetable-2-tutorial/wiki/lesson-13
Résumé: vous devez émettre des événements avec le package vue-events
ou calculer des propriétés avec Vuex (recommandé). Vous voulez utiliser le :append-params="moreParams"
sur vuetable qui est une fonctionnalité de vuetable2 qui sera ajoutée à api-url
avec les valeurs de pagination (distinctes de ces paramètres). J'utilise Vuex donc je fais de moreParams une propriété calculée de vuetable. Il utilise this.$store.getters.moreParams
qui est mon geteur Vuex car j'ai plusieurs champs de recherche. C'est réactif à mes commets Vuex à partir des gestionnaires de champs de saisie.
computed: {
moreParams() {
return this.$store.getters.moreParams
},
},
Sinon, vous pourriez utiliser un $ store.stage.property. J'ai une montre sur moreParams qui rafraîchit la table avec la nouvelle requête:
watch: {
moreParams(newVal, oldVal) {
this.$nextTick(() => {
this.$refs.vuetable.refresh()
})
},
},