vue-tables 2-来自自定义过滤器的$emit不使它回调？

Question

我很难在Vue -tables 2中获得一个自定义筛选器，以便从Vue中嵌套的单页组件中发出一个事件。问题可能是我没有在上游正确地捕获/处理它。

我在dataTable的自定义模板中有一个自定义过滤器dataTable，该模板释放Event.$emit("vue-tables.filter::filterByBrand", this.brand)。

我想在一个名为filterByBrand的顶级路由器组件中捕获这个‘<Grid />’事件，这是我的<v-client-table />和相应选项(包括我的customFilters )的位置。

对我从哪里脱身有什么想法吗？

Grid.vue

...
customFilters: [
  {
    name: "filterByBrand",
    callback: function(row, query) {
      console.log("filter=", query); // nothing?
      return row.name[0] === query;
    },
  },
],
...

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { ClientTable, Event } from "vue-tables-2";
import "./scss/index.scss";

Vue.use(ClientTable, {}, false, "bootstrap4", {
  filtersRow: FiltersRow,
  genericFilter: FilterKeyword,
  sortControl: SortControl,
  tableHeading: TableHeading,
  dataTable: DataTable, // in which resides my custom filter <filter-brand />
});

Vue.use(Event);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount("#app");

FilterBrand.vue

<template>
  <div class="form-group position-relative">
    <label for="brandFilter">
      Brand:
    </label>
    <select
      name="brandFilter"
      id="brandFilter"
      class="form-control select"
      @change="handleChange($event)"
      v-model="brand"
    >
      <option disabled selected value="">Choose</option>
      <option value="All">All</option>
      <option value="Brand 1">Brand 1</option>
      <option value="Brand 2">Brand 2</option>
    </select>
  </div>
</template>
<script>
import { Event } from "vue-tables-2"; // if I don't import here, Event below is "window" event.

export default {
  name: "FilterBrand",
  props: ["props"],
  data() {
    return {
      brand: "",
    };
  },
  methods: {
    handleChange(event) {
      this.brand = event.target.value;
      Event.$emit("vue-tables.filter::filterByBrand", this.brand); // where is this going?? :)
    },
  },
};
</script>

Answer 1

我的错误是我把customFilters块放在options: {}块之外的主Grid.vue文件中。

所以这个：

data() {
  return {
    brandEventCount: 0,
    columns: [],
    eventsData: [],
    options: {
      columnsDropdown: true,
      perPage: 25,
      debounce: 500,
    },
    customFilters: [
      {
        name: "filterByBrand",
        callback: function (row, query) {
          return row.brand === query;
        },
      },
    ],
  };
},

应该是这样的：

data() {
  return {
    brandEventCount: 0,
    columns: [],
    eventsData: [],
    options: {
      columnsDropdown: true,
      perPage: 25,
      debounce: 500,
      customFilters: [
        {
          name: "filterByBrand",
          callback: function (row, query) {
            return row.brand === query;
          },
        },
      ],
    },
  };
},

Answer 2

import {ClientTable, Event} from 'vue-tables-2';
Vue.use(ClientTable, {}, false, 'bootstrap4');
window.vtEvent = Event; //make new name for vue-table-2 event

然后在以下组件上使用：

vtEvent.$emit('vue-tables.filter::filterprodusen', value);

希望这会有帮助..。