webentwicklung-frage-antwort-db.com.de

Vue-Tabellen 2 - Benutzerdefinierte Filter

Ich versuche, dieses https://github.com/matfish2/vue-tables-2 mit Vue 2.1.8 zu verwenden.

Und es funktioniert perfekt, ABER ich muss benutzerdefinierte Filter verwenden, um einige Felder basierend auf ihrem Wert usw. zu formatieren.

In Optionen habe ich dies:

customFilters: [
{
  name:'count',
  callback: function(row, query) {
    console.log('see me?'); // Not firing this
    return row.count[0] == query;
}
}
]

In den Dokumenten heißt es, dass ich das tun muss:

Using the event bus:

Event.$emit('vue-tables.filter::count', query);

Aber ich habe keine Ahnung, wo ich das ablegen soll? Ich habe viele Orte ausprobiert. Zum Beispiel in meinem Axios Success Callback aber nichts.

Ich denke, das ist sehr einfach und ich sollte es wissen, aber ich weiß es nicht. Wenn mir jemand sagen könnte, wo ich das Personal für den Eventbus hinstellen soll, wäre das fantastisch!

6
Verba

Die Dokumentation könnte dies besser beschreiben. Es ist ein bisschen schwer zu verstehen.

Sie müssen den benannten export Event von vue-tables-2 importieren, damit Sie den Ereignisbus der Tabelle haben und das benutzerdefinierte Ereignis in Ihrem benutzerdefinierten Click-Handler ausgeben.

In der Demo ist es für ein globales Objekt verfügbar. In ES6 importieren Sie es wie in den Dokumenten mit import {ServerTable, ClientTable, Event} from 'vue-tables-2'; beschrieben.

Bitte schauen Sie sich die Alphabet Filter Demo unten oder in dieser Geige an.

Die Demo ähnelt der Demo-Geige vue-tables-1, die Sie finden hier .

// 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

Ich fand diese Lektion, um mir am besten zu helfen. https://github.com/ratiw/vuetable-2-tutorial/wiki/lesson-13

Zusammenfassung: Sie sollten Ereignisse mit dem Paket vue-events ausgeben oder Eigenschaften mit Vuex berechnen (empfohlen). Sie möchten den :append-params="moreParams" für vuetable verwenden, eine Funktion von vuetable2, die zusammen mit Paginierungswerten (getrennt von diesen Parametern) an api-url angehängt wird. Ich verwende Vuex, um moreParams zu einer berechneten Eigenschaft der vuetable zu machen. Es wird this.$store.getters.moreParams verwendet, der mein Vuex-Getter ist, da ich mehrere Suchfelder habe. Dies reagiert auf meine Vuex-Commits von Eingabefeld-Handlern.

    computed: {
      moreParams() {
        return this.$store.getters.moreParams
      },
    },

Andernfalls könnten Sie ein $ store.stage.property verwenden. Ich habe eine Uhr auf moreParams, die die Tabelle mit der neuen Abfrage aktualisiert:

    watch: {
      moreParams(newVal, oldVal) {
        this.$nextTick(() => {
          this.$refs.vuetable.refresh()
        })
      },
    },
0
Turbo

Verstecke den Standardfilter und die Auswahlbox pro Seite und definiere einen neuen Filter 'manual_agent'.

        optionsTable: {
            customFilters: ['manual_agent'],
            filterable: false,
            perPageValues: []
        },

Ausblenden, weil es keine Slot-Option gibt, um neue benutzerdefinierte Filter zwischen der Standardauswahl und der Auswahl pro Seite hinzuzufügen, und die Standardauswahl ist auch nicht besonders empfehlenswert. Das folgende Beispiel dient der Implementierung von Servertabellen.

Methode, die global für benutzerdefinierte Filter verwendet wird:

toggleFilter: function(filterName, $event) {
                this.$refs.serverTableRef.setPage(1);
                setTimeout(function () {
                    let searchItem = '';
                    if (typeof $event === 'string') { searchItem = $event; } else { searchItem = $event.target.value; }
                    let table = this.$refs.serverTableRef;
                    table.customQueries[filterName] = searchItem;
                    table.getData();
                }.bind(this), 1000);
            }

Damit dies funktioniert, müssen wir in unserer V-Server-Tabelle den Ref-Namen wie folgt definiert haben:

<v-server-table ref="serverTableRef"

Jetzt in der Vorlage neuer benutzerdefinierter Auswahlfeldfilter (V-Modell zeigt nur auf die in den Daten definierte benutzerdefinierte Variable)

<select name="typeoftrip" v-model="agentFilter" @change="toggleFilter('manual_agent', agentFilter)">

Und ein benutzerdefinierter Filter, der den Standardfilter ersetzt, den wir durch Deaktivieren verloren haben. (Es wurde der Name "query" verwendet, daher wird derselbe verwendet.)

<input name="typeoftrip" v-model="mainQuery" v-on:keyup="toggleFilter('query', mainQuery)">

Und neue benutzerdefinierte Auswahl für unsere eigenen pro Seite auswählen

            <select v-model="limitFilter"  @change="$refs.serverTableRef.setLimit($event.target.value)" >
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
            </select>
0
Jiro Matchonson