如何使用输入字段过滤 bootstrap vue 表

Question

标题说明了一切。我想用输入框过滤我的引导表。

这是我的组件的.html部分：

<b-table
:items="Table"
:fields="fields"
striped
small
>

</b-table>

这是.vue文件

<template src="./jointable.component.html"> </template>
<style scoped src="./jointable.component.css"> </style>


<script>

import axios from 'axios'

export default {
    name: 'jointable',
    data(){
        return {
            Table: [],
            fields: [
                {key: 'client_id', label: "School Code", sortable: true},
                {key: 'client_name', sortable: true},
                {key: 'uuid', label: "ID", sortable: true},
                {key: 'step', label: "Job Running", sortable: true},
                {key: 'serverid', sortable: true},
                {key: 'create_timestamp', label: "Job Start", sortable: true},
                {key: 'time_elapsed', sortable: true},
                {key: 'wh_db_host', sortable: true}
            ]
        }
    },
    methods : {
        loadData: function(){
            axios.get("http://192.168.56.101:5000/jointable")
            .then((res) => {
                this.Table = res.data
            })
            .catch((err) => {
                console.log(err)
            })
        }
    },
    mounted() {
        this.loadData();

        setInterval(function(){
            this.loadData()
        }.bind(this), 10000)
    },
    computed() {

    }
}
</script>

现在您可以看到我的脚本每 10 秒重新加载一次表并更新数据。这可以。我现在还想让我的表格可搜索/可过滤。我知道我必须使用计算出来的东西，但我该如何使用它。

感谢所有帮助我的人！

Answer 1

过滤的方法有很多种，但最简单的版本就是简单地将字符串传递给filter上的 prop b-table。

这将在所有列中搜索您传入的字符串，因此，如果您将数据属性绑定到输入v-model，并将相同的数据属性绑定到filter表上的属性，则您在输入中键入的任何内容都将过滤表。

您可以在文档中阅读有关过滤工作原理以及其他一些方法的更多信息。

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>