Question

我正在尝试使用自定义过滤器功能过滤掉Bootstrap-Vue表中的某些行。

我编写了一个函数，该函数接受两个参数-行对象和空的过滤器参数，并返回true或false，如documentation一样。

我尝试使用this和this答案中提供的代码，但它们也不起作用。

我还尝试将console.log(row, filter)放入filterTable方法中，但是它没有向控制台写入任何内容。

<template>
  <div>
    <b-table 
      striped hover 
      :items="items" 
      :filter=null 
      :filter-function="filterTable"></b-table>
  </div>
</template>

export default {
    data() {
      return {
        items: [
          { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
          { age: 38, first_name: 'Jami', last_name: 'Carney' }
        ]
      }
    },

    methods: {
      filterTable(row) {
        if (row.age >= 40) {
          return false;
        } else {
          return true;
        }
      }
    }
}

应该显示40岁以下的人，但显示所有记录。

Answer 1

传递给过滤器函数的条件必须放置在过滤器属性上，以便进行反应。例如，您可以添加一个新属性，例如criteria到您的数据对象，并将其分配给:filter。 filter属性的期望值为String，RegExp，Object或Array。如果给它分配一个数字，则会收到警告。过滤器功能的条件将作为第二个参数传递。

请参见以下示例：

new Vue({
  el: "#app",
  data() {
    return {
      criteria: "40",
      items: [{
          age: 40,
          first_name: 'Dickerson',
          last_name: 'Macdonald'
        },
        {
          age: 21,
          first_name: 'Larsen',
          last_name: 'Shaw'
        },
        {
          age: 89,
          first_name: 'Geneva',
          last_name: 'Wilson'
        },
        {
          age: 38,
          first_name: 'Jami',
          last_name: 'Carney'
        }
      ]
    }
  },

  methods: {
    filterTable(row, filter) {
      if (row.age >= filter) {
        return false;
      } else {
        return true;
      }
    }
  }
})

<link href="https://unpkg.com/bootstrap-vue@2.0.0-rc.21/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.0.0-rc.21/dist/bootstrap-vue.js"></script>

<div id="app">
  <div>
    <b-table striped hover :items="items" :filter="criteria" :filter-function="filterTable">
    </b-table>
  </div>
</div>

如何使用自定义过滤功能过滤b表行？

1 个答案: