Vue Tables 2 - Пользовательские фильтры

Я пытаюсь использовать этот https://github.com/matfish2/vue-tables-2 с Vue 2.1.8.

И это работает отлично, но мне нужно использовать пользовательские фильтры для форматирования некоторых полей на основе их значения и т. Д.

В опциях у меня есть это:

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

В документации сказано, что я должен сделать это:

Using the event bus:

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

Но я понятия не имею, где это поставить? Я перепробовал много мест. Например в моем аксиосе успех колбэка но ничего.

Я думаю, это очень просто, и я должен это знать, но я не знаю. Так что, если бы кто-то мог сказать мне, где разместить это событие, персонал автобуса был бы потрясающим!

Источник

1 ответ

Решение

Документы могли бы описать это лучше. Это немного сложно понять.

Вам нужно импортировать названный экспорт Event из vue-tables-2, так что у вас есть шина событий таблицы и выведите пользовательское событие в свой обработчик пользовательских кликов.

В демоверсии он доступен на глобальном объекте. В ES6 вы импортируете его, как описано в документации с import {ServerTable, ClientTable, Event} from 'vue-tables-2';

Пожалуйста, посмотрите на демо фильтра алфавита ниже или в этой скрипке.

Демонстрация похожа на демонстрационную скрипку vue-tables-1, которую вы можете найти здесь.

// 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://rawgit.com/matfish2/vue-tables-2/master/dist/vue-tables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.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>

Источник

Обновленная рабочая скрипка для всех, кто хочет поиграть. Я до сих пор не уверен, как заставить его работать с вложенными одностраничными компонентами.

customFilters: [{
  name: 'alphabet',
  callback: function(row, query) {
    return row.name[0] == query;
  }
}]
Источник

Скрыть фильтр по умолчанию и на странице выбора страницы и определения одного нового фильтра "manual_agent".

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

Скрытие, потому что нет опции 'slot', чтобы иметь возможность добавлять новые настраиваемые фильтры между одним по умолчанию и выбором страницы, и один по умолчанию также не слишком отзывчив. Ниже приведен пример реализации таблицы сервера.

Метод, который будет использоваться глобально для пользовательских фильтров:

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);
            }

Чтобы это работало, мы должны определить ref ref в нашей таблице v-server следующим образом:

<v-server-table ref="serverTableRef"

Теперь в шаблоне новый пользовательский фильтр выбора (v-модель просто указывает на пользовательскую переменную, определенную в данных)

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

И пользовательский фильтр, который заменит фильтр по умолчанию, который мы потеряли, отключив его. (он использовал имя "запрос", поэтому мы используем то же самое)

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

И новый пользовательский выбор для нашей собственной на странице выбора

            <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>
Источник

Я нашел этот урок, чтобы помочь мне лучше всего. https://github.com/ratiw/vuetable-2-tutorial/wiki/lesson-13

Резюме: Вы должны генерировать события с vue-events упаковать или вычислить свойства с помощью Vuex (рекомендуется). Вы хотите использовать :append-params="moreParams" на vuetable, который является функцией vuetable2, которая будет добавлять к api-url наряду со значениями нумерации страниц (отдельно от этих параметров). Я использую Vuex, поэтому я делаю moreParams вычисляемым свойством vuetable. Оно использует this.$store.getters.moreParams это мой получатель Vuex, так как у меня есть несколько полей поиска. Это реагирует на мои коммиты Vuex от обработчиков полей ввода.

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

В противном случае вы можете использовать $store.stage.property. У меня есть часы на moreParams, который обновляет таблицу с новым запросом:

    watch: {
      moreParams(newVal, oldVal) {
        this.$nextTick(() => {
          this.$refs.vuetable.refresh()
        })
      },
    },
Источник
Другие вопросы по тегам