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

Posted 2023-02-23

【中文标题】VueJS2表：如何添加过滤器[重复]

【英文标题】：VueJS2 Table: How to add a filter [duplicate]

【发布时间】：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来添加值？

【参考方案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" ....