VueJS2表：如何添加过滤器[重复]答案

【问题标题】：VueJS2 Table: How to add a filter [duplicate]VueJS2表：如何添加过滤器[重复]
【发布时间】：2018-03-17 03:04:19
【问题描述】：

我正在尝试在link 之后使用类似的东西来使用 axios 在 vue 中填充表格。

如何添加过滤器和搜索栏？我似乎无法添加v-for="post in posts | filterBy search。其中 search 是 <input> 的 v-model。我看到这在 vuejs2 中不可用的文档。除了v-for 指令，我还可以在<table> 标签中使用哪些其他指令来支持vuejs2 中的filterBy？

还有其他指令可以与 axios 一起使用吗？
如果我有一个来自rest api的结构json，我如何使用vue2-bootstrap-table2之类的东西并通过解析json来添加值？

【问题讨论】：

标签： javascript json vuejs2 axios

【解决方案1】：

v-for 是您应该用来显示多个项目的指令。另请注意，您打算用于过滤的search 被vue.js 视为data，并且每当此类数据发生变化时，vue.js 都会触发响应。

您可以在搜索查询更改后更新 computed 属性。

computed: {
    filteredList: function () {
      return this.list.filter(function(){ 
        //select only what matches filter
      });
    }
  }

或者，例如，如果您从异步函数调用（例如远程 api）中获取过滤列表，vue.js 会提供属性 watchers。其实这正是VueBootstrapTable implements the filter

watch : {
  filterKey: function () {
    // filter was updated, so resetting to page 1
    this.page = 1;
    this.processFilter();
  },
  ...
}

要将 VueBootstrapTable 与远程数据一起使用，您不必直接使用 axios，因为该组件已经在后台使用它。但是，您需要将其配置为通过将其添加到您的 data 属性来获取远程数据

ajax: {
  enabled: true,
  url: "http://localhost:9430/data/test",
  method: "GET",
  delegate: false,
  axiosConfig: {}
},

然后在你的组件声明中引用 ajax 配置，比如

<vue-bootstrap-table :ajax="ajax" ....

【讨论】：