Question

我正在尝试使用link之后使用axios填充vue中的表格。

如何添加过滤器和搜索栏？我似乎无法添加package com.adam.rest.mapper; import com.adam.rest.model.Student; import java.util.Collection; public interface StudentMapper { Collection<Student> getStudents(); Student getStudent(Integer id); Student getStudent(String name); void updateStudent(Student student); void removeStudent(Integer id); void removeStudent(String name); void createStudent(Student student); }。搜索是v-for="post in posts | filterBy search的v模型。我看到了vuejs2中没有的文档。而不是<input>指令，我可以在v-for标记中使用哪些其他指令来支持vuejs2中的<table>？

我可以使用axios的另一个指令吗？
如果我有一个结构json来自rest api，我怎样才能使用vue2-bootstrap-table2这样的东西并通过解析json来添加它？

Answer 1

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

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

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

或者，例如，如果您从异步函数调用中获取筛选列表，例如remote 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" ....

VueJS2表：如何添加过滤器

1 个答案: