Vue表2 - 自定义过滤器

问题描述

我正在尝试使用此与Vue 2.1.8。

I'm trying to use this https://github.com/matfish2/vue-tables-2 with Vue 2.1.8.

并且它工作正常但我需要使用自定义过滤器根据其值等格式化某些字段。

And it's working perfectly BUT I need to use custom filters to format some fields based on their value etc.

在选项中我有这个：

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

在文档中它说我必须这样做：

In the docs it says I have to do this:

Using the event bus:

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

但我不知道在哪里放这个？我尝试了很多地方。例如在我的axios成功回调中，但没有。

But I have no idea where to put this? I tried many places. For example in my axios success callback but nothing.

我想这是非常基本的，我应该知道这一点，但我不知道。所以，如果有人能告诉我在哪里放置那个活动车的工作人员会很棒！

I guess this is very basic and I should know this but I don't. So if someone could tell me where to put that event bus staff would be awesome!

推荐答案

文档可以更好地描述这一点。这有点难以理解。

The docs could be describing this better. It's a bit difficult to understand.

您需要导入vue-tables-2的命名导出事件，所以你有表的事件总线并在你的自定义点击处理程序中发出自定义事件。

You need to import the named export Event of vue-tables-2, so you have the event bus of the table and emit the custom event in your custom click handler.

在演示中它可用于全局对象。在ES6中，您将按照文档中的描述从'vue-tables-2'导入{ServerTable，ClientTable，Event}导入文档;

In the demo it's available on global object. In ES6 you'll import it as described in the docs with import {ServerTable, ClientTable, Event} from 'vue-tables-2';

请查看下面的字母过滤器演示或。

The demo is similar to the vue-tables-1 demo fiddle that you can find here.

// 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/vue-tables-2@1.4.70/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>

这篇关于Vue表2 - 自定义过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！