Question

我有一个带有过滤器的b表，但是当我按一个字符（在我的情况下）通过ID搜索时，该过滤器不起作用，但是，如果我引入2个或多个数字，则此过滤器有效。我检查了bootstrap-vue上的示例，并通过一个数字搜索了此工作，但是我找不到为什么在我的代码中这不能按预期工作。

<div id="app">
  <span label-for="search">search: </span>
  <input id="search" type="text" v-model="filter" placeholder="type by search">
  {{ this.filter }}
  <b-table
     class="mt-2"
     :filter="filter"
    :fields="fields"
    :items="items">    
  </b-table>
</div>

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        filter: null,
        fields: [
          {
            key: 'isoqf_id',
            label: '#'
          },
          {
            key: 'name',
            label: 'Name'
          },
          {
            key: 'references',
            label: 'references id'
          }
        ],
        items: [
          {
            "isoqf_id": 1,
            "cerqual": {
                "explanation": "Suspendisse eget ligula blandit, dignissim neque at, luctus nunc. Nulla eros odio, fringilla et diam ut, maximus euismod nibh.",
                "option": "0"
            },
            "name": "finding #1",
            "references": ["4a5f2a", "4a5f2f"],
            "organization": "7b9c88ec182ca383",
            "project_id": "5d84d6bc2b711a1a2eba93ea",
            "id": "5d84ee422b711a1a2eba9507",
            "cerqual_option": "0"
        }, {
            "isoqf_id": 2,
            "cerqual": {
                "explanation": "",
                "option": "0"
            },
            "name": "finding #2",
            "references": ["4a5f3b", "4a5f37"],
            "organization": "7b9c88ec182ca383",
            "project_id": "5d84d6bc2b711a1a2eba93ea",
            "id": "5d850b3c2b711a1a2eba956f",
            "cerqual_option": "0"
        }, {
            "isoqf_id": 3,
            "cerqual": {
                "explanation": "",
                "option": "3"
            },
            "name": "finding #3",
            "references": ["4a5f3b", "4a5f28"],
            "organization": "7b9c88ec182ca383",
            "project_id": "5d84d6bc2b711a1a2eba93ea",
            "id": "5d8517a72b711a1a2eba9679",
            "cerqual_option": "3"
        }]
      }
    },
    methods: {

    }
  })
}

测试网址https://codepen.io/damian-garrido/pen/aboemNG

我希望我可以通过isoqf_id字段进行搜索，我在做什么错了？

Answer 1

默认搜索算法搜索项表中的所有字段（而不仅仅是可见数据）。通过查找包含过滤字符串的任何内容进行匹配。因此，如果您输入数字1，它将在所有字段中显示所有字符为1的记录。

要仅限制某些字段，请将属性filter-included-fields设置为一个数组，该数组包含要限制搜索的顶级属性名（字段名）。如果您想限制为isoqf_id，则设置:filter-included-fields=['isoqf_id']"。要将过滤限制为isoqf_id和references，请设置`：filter-included-fields = ['isoqf_id'，'references']“

请参见https://bootstrap-vue.js.org/docs/components/table#built-in-filtering-options

筛选器不适用于b表上的一个输入字符

1 个答案: