javascript - VueJS2 表 : How to add a filter

Question

这个问题已经有答案了:

Filter list with Vue.js (5 个回答)

已关闭 5 年前。

我正在尝试使用以下类似的内容 link使用 axios 填充 vue 中的表格。

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

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

Answer 1

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

您可以使用一个计算属性，该属性会在搜索查询发生更改时更新。

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" ....