Javascript 在vue中筛选引导vue数据表

我用bootstrap vue创建了一个非常简单的表，在这里我可以使用内置过滤器过滤数据。 我现在遇到的问题是，我想添加另一个过滤器，在那里我可以输入一个数字，并获得

value

高于指定数字的所有行。我真的不知道从哪里开始，因为我已经使用了一个过滤器。有人能给我一个建议吗？任何建议都将不胜感激

<template>
  <div class="overflow-auto">
    <b-form-fieldset horizontal label="Filter" class="col-6">
      <b-input v-model="filter" placeholder="Filter table.."></b-input>
    </b-form-fieldset>

    <b-table
      id="my-table"
      :filter="filter" 
      :fields="fields"
      :items="items"
      small
    ></b-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filter: '',
      fields: [{'key': 'asset', 'sortable': true}, {'key': 'value', 'sortable': false}, {'key': 'address', 'sortable': false}],
      items: []
    }
  },

  computed: {
    rows() {
      return this.items.length
    }
  },

}
</script>

导出默认值{
数据（）{
返回{
筛选器：“”，
字段：[{'key'：'asset'，'sortable'：true}，{'key'：'value'，'sortable'：false}，{'key'：'address'，'sortable'：false}]，
项目：[]
}
},
计算：{
行（）{
返回此.items.length
}
},
}

如果要保留现有筛选器并添加您的筛选器，可以创建一个

computed

属性，例如

prefilteredItems

，并在模板中使用它：

导出默认值{
数据（）{
返回{
筛选器：“”，
最小值：0，
/* ... */
项目：[]
}
},
计算：{
prefilteredItems（）{
返回this.items.filter（（{value}）=>value>=this.minValue）；
},
行（）{
返回this.prefilteredItems.length
}
},
}

这是否回答了您的问题？不完全是这样，因为在我的例子中，我需要有多个过滤器，但是我在文档中找不到关于这种情况的任何信息。如果要保留现有的过滤器并添加您的过滤器，可以创建一个

computed

属性，例如

prefilteredItems（）{return this.items.filter（{value}=>value>3）；}

并在模板

：items=“prefilteredItems”

（将

3

替换为您可能拥有但不在代码段中的字段的值）中使用它，只要原始数组未发生变异，就有意义。@blex我尝试了这个方法，效果很好。你有没有办法把这个作为一个答案贴出来，这样我就可以接受？