如何在bootstrap-vue 2.0中为列创建动态输入过滤器

import { BTable, BFormInput } from 'bootstrap-vue'

data() {
  return {
    filterValue: ''
  }
}

<template>
  <div>
    <b-table :items="items" :fields="fields" :filter="filterValue">
      <template v-for="field in fields" v-slot:[`cell(${field.key})`]="{ value }">
        <div v-if="field.filterable">
          <b-form-input v-model="filterValue" :placeholder="`Filter ${field.label}`"></b-form-input>
        </div>
        <div v-else>
          {{ value }}
        </div>
      </template>
    </b-table>
  </div>
</template>

data() {
  return {
    items: [
      { id: 1, name: 'John', age: 25 },
      { id: 2, name: 'Jane', age: 30 },
      { id: 3, name: 'Bob', age: 35 }
    ],
    fields: [
      { key: 'id', label: 'ID', filterable: true },
      { key: 'name', label: 'Name', filterable: true },
      { key: 'age', label: 'Age', filterable: false }
    ]
  }
}

computed: {
  filteredItems() {
    return this.items.filter(item => {
      return item.name.toLowerCase().includes(this.filterValue.toLowerCase())
    })
  }
}