vue-tables-2

Question

我正在努力在 vue-tables-2 中获取自定义过滤器以从 Vue 中的嵌套单页组件发出事件。问题可能是我没有在上游正确捕获/处理它。

我在 dataTable 的自定义模板中有一个自定义过滤器 <filter-brand />，它发出 Event.$emit("vue-tables.filter::filterByBrand", this.brand)。

我想在名为 <Grid /> 的顶级路由器组件中捕获此 'filterByBrand' 事件，这是我的 <v-client-table /> 加上包括我的 [=18 在内的服务员选项的地方=].

关于我偏离路线的地方有什么想法吗？

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

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

希望这会有所帮助..

Answer 2

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

所以这个：

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;
          },
        },
      ],
    },
  };
},

vue-tables-2 — 来自自定义过滤器的 $emit 没有进入回调？

vue-tables-2 — $emit from custom filter not making it to callback?

javascript

events

vue.js

vuejs2