web-dev-qa-db-fra.com

Vue Tables 2 - Filtres personnalisés

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!

javascriptvue.jsvuejs2vue-tables-2
6
Verba

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>
9
AWolf

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()
        })
      },
    },
0
Turbo