0
270
VistasFiltre la tabla BootstrapVue usando una cadena separada por comas con la condición OR en el campo de entrada
Tengo una tabla BootstrapVue que se ve así;
El código (el crédito va a esta respuesta ) para la tabla está aquí;
new Vue({ el: '#app', data() { return { filter: '', items: [ { id: 1, first_name: "Mikkel", last_name: "Hansen", age: 54 }, { id: 2, first_name: "Kasper", last_name: "Hvidt", age: 42 }, { id: 3, first_name: "Lasse", last_name: "Boesen", age: 39 }, { id: 4, first_name: "Kasper", last_name: "Hansen", age: 62 }, { id: 5, first_name: "Mads", last_name: "Mikkelsen", age: 31 }, ] } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script> <script src="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.min.js"></script> <link href="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.css" rel="stylesheet" /> <link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" /> <div id="app" class="p-5"> <b-input v-model="filter" placeholder="Filter table.."></b-input> <hr /> <b-table :items="items" :fields="fields" :filter="filter"> </b-table> </div> Según el código anterior, las filas de la tabla se filtrarán según la cadena dentro del campo de entrada. Desafortunadamente, esto no es lo que quiero. Lo que quiero es que el campo de entrada pueda aceptar una cadena separada por comas y las subcadenas se pueden usar para filtrar las filas de la tabla en una condición OR. Por ejemplo, si la cadena es 54, Hvidt , se filtrarán la primera y la segunda fila.
Estoy usando BootstrapVue, vue.js 2.6
1 Respuestas
Responde la pregunta0
BootstrapVue permite escribir su propia lógica para el filtrado, utilizando una función de filtro personalizada .
Para que funcione, necesitas:
- a
:filterespecificado - el valor del
filterpara ser veraz. Si es falso, la función de filtro se omite (no se produce ningún filtrado). - una
:filter-functionespecificada, tomando dos argumentos:rowy valor defilteractual (opcional y no necesario: puede leerlo desdethis.filter).
Aquí hay un ejemplo, dividiendo el valor del filter actual por , (coma), normalizando los fragmentos ( trim & toLowerCase ) y devolviendo si se encuentra o no algún fragmento dentro de los valores normalizados de la fila.
new Vue({ el: '#app', data() { return { filter: '54, Hvidt', items: [ { id: 1, first_name: "Mikkel", last_name: "Hansen", age: 54 }, { id: 2, first_name: "Kasper", last_name: "Hvidt", age: 42 }, { id: 3, first_name: "Lasse", last_name: "Boesen", age: 39 }, { id: 4, first_name: "Kasper", last_name: "Hansen", age: 62 }, { id: 5, first_name: "Mads", last_name: "Mikkelsen", age: 31 } ] } }, methods: { normalizeString(s) { return `${s}`.trim().toLowerCase(); }, filterFn(row) { return this.filter.split(',') .map(this.normalizeString) .some( term => Object.values(row) .map(this.normalizeString) .some( val => val.indexOf(term) > -1 ) ); } } }) <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> <script src="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.min.js"></script> <link href="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.css" rel="stylesheet" /> <link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" /> <div id="app" class="p-5"> <b-input v-model="filter" placeholder="Filter table..."></b-input> <hr /> <b-table :items="items" :filter="filter" :filter-function="filterFn"> </b-table> </div> Nota importante : la función de filtro proporcionada aquí es demostrativa , no tiene en cuenta los filter-ignored-fields filter-included-fields de BootstrapVue. Tampoco tiene en cuenta la definición del campo filterByFormatted .
Si necesita alguna de esas características, deberá mejorarla usted mismo.
Supongo que no hace falta señalar que la función de filtro tiene acceso a todo el componente y puede modificarse de cualquier forma. La row se muestra si la función devuelve un valor verdadero y no se muestra si devuelve un valor falso.