Bootstrap-vue b-таблица с фильтром в заголовке

Question

У меня есть таблица, сгенерированная с помощью bootstrap-vue, которая показывает результаты системного поиска.

В таблице результатов показаны записи для пользователя, и пользователь может отсортировать их и отфильтровать.

Как добавить поле поиска под заголовком таблицы <th>, созданным с помощью начальной загрузки-vue <b-table> element?

Снимок экрана текущей таблицы :

Макет требуемой таблицы :

Answer 1

Получил ответ от Фила, просто сделав его более общим

filtered() {
      const filtered = this.items.filter(item => {
        return Object.keys(this.filters).every(key =>
          String(item[key]).includes(this.filters[key])
        );
      });
      return filtered.length > 0
        ? filtered
        : [
            Object.keys(this.items[0]).reduce(function(obj, value) {
              obj[value] = '';
              return obj;
            }, {})
          ];
    }

Answer 2

ошибка

      const filtered = this.items.filter(item => {
        return Object.keys(this.filters).every(key =>
            // String(item[key]).includes(this.filters[key]))
            return String(item[key]).includes(this.filters[key]))
      })

Answer 3

Вы можете использовать слот top-row, чтобы настроить свой собственный первый ряд.Ниже приведен пример «голых костей» ...

new Vue({
  el: '#app',
  data: {
    filters: {
      id: '',
      issuedBy: '',
      issuedTo: ''
    },
    items: [{id:1234,issuedBy:'Operator',issuedTo:'abcd-efgh'},{id:5678,issuedBy:'User',issuedTo:'ijkl-mnop'}]
  },
  computed: {
    filtered () {
      const filtered = this.items.filter(item => {
        return Object.keys(this.filters).every(key =>
            String(item[key]).includes(this.filters[key]))
      })
      return filtered.length > 0 ? filtered : [{
        id: '',
        issuedBy: '',
        issuedTo: ''
      }]
    }
  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/><link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/><script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script><script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script><script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
<b-table striped show-empty :items="filtered">
  <template slot="top-row" slot-scope="{ fields }">
    <td v-for="field in fields" :key="field.key">
      <input v-model="filters[field.key]" :placeholder="field.label">
    </td>
  </template>
</b-table>
</div>

Примечание: Я использовал вычисленное свойство для фильтрации элементов вместо :filter проп в b-table, потому что этоне отображает строки, если все элементы отфильтрованы, включая ваш первый ряд.Таким образом, я могу предоставить фиктивную строку данных, если результат будет пустым.