Bootstrap-vue b-table con filtro en el encabezado

Solución:

Puedes usar el top-row ranura para personalizar su propia primera fila. Vea a continuación un ejemplo básico.

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="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/><link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css"/><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script><script src="https://unpkg.com/[email protected]/dist/polyfill.min.js"></script><script src="https://unpkg.com/[email protected]/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>

Nota: He usado una propiedad calculada para filtrar los elementos en lugar del :filter apoyo en b-table porque no representa filas si se filtran todos los elementos, incluida la primera fila personalizada. De esta manera puedo proporcionar una fila de datos ficticios si el resultado está vacío.

He votado a favor de la respuesta de Phil, simplemente haciéndola más genérica

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;
            }, {})
          ];
    }

---

---

Utiliza Nuestro Buscador