Bootstrap-vue table with :filter-included-fields 不工作

Question

我在 bootstrap-vue table 中需要帮助，如果我过滤字段 'created_by' ， filter-included-fields 正在工作，但如果我过滤 'memberinfo.age' ， filter-included-fields 不工作

Table代码：

<b-table id="my-table"
  :items="allMember.data"
  :per-page="perPage"
  :current-page="currentPage"
  :fields="fields"
  :filter="filter"
  @filtered="onFiltered"
  :filter-included-fields="['memberinfo.age']"
>
</b-table>

这是我的田地

  fields: [
    'selected',
    { key: 'memberinfo.fullname', label: 'Full Name' },
    { key: 'memberinfo.address', label: 'address' },
    { key: 'memberinfo.age', label: 'age' },
    { key: 'memberinfo.gender', label: 'gender' }
    {
      key: 'created_at',
      label: 'Date register',
      formatter: value => {
        return value.substring(0, 10)
      }
    }

这是我的allMember.data

[
   {
      "id":1,
      "email_address":"maryam.ziemann@example.com",
      "created_at":"2020-10-11T05:09:17.000000Z",
      "memberinfo":{
         "fullname":"Kade Heidenreich MD",
         "address":"42316 Elvie Mission Suite 938\nNorth Johnathan, IL 50463-0481",
         "age":27
         "gender":"Female"
      }
   },
   {
      "id":2,
      "email_address":"lilla17@example.net",
      "created_at":"2020-10-11T05:09:17.000000Z",
      "memberinfo":{
         "fullname":"Jovan Beatty II",
         "address":"1996 Olson Highway\nKubport, ID 35064-7977",
         "age":27,
         "gender":"Female"
      }
   },
   {
      "id":3,
      "email_address":"nayeli.west@example.net",
      "created_at":"2020-10-11T05:09:17.000000Z",
      "memberinfo":{
         "fullname":"Sheila Emmerich",
         "address":"88080 Ed Corner Apt. 702\nKrajcikton, OK 50658-1519",
         "age":27,
         "gender":"Male"
      }
   },
   {
      "id":4,
      "email_address":"lauren.hahn@example.net",
      "created_at":"2020-10-11T05:09:17.000000Z",
      "memberinfo":{
         "fullname":"Yesenia Rau",
         "address":"776 Hilpert Club Suite 853\nStreichberg, MA 78250",
         "age":23,
         "gender":"Male"
      }
   },
   {
      "id":5,
      "email_address":"flatley.lillian@example.net",
      "created_at":"2020-10-11T05:09:17.000000Z",
      "memberinfo":{
         "fullname":"Junior Eichmann IV",
         "address":"61705 Watsica Motorway Suite 816\nStrackeside, VA 61128-8080",
         "age":27,
         "gender":"Male"
      }
   }
]

Answer 1

只需使用会员信息对象

 :filter-included-fields="['memberinfo']">

Answer 2

filter-include-fields 和 filter-ignored-fields 道具仅适用于 top 级别属性，如文档 here

中所述

你必须写一个 custom filter function，才能完成你想要做的事情。

Bootstrap-vue table with :filter-included-fields 不工作

Bootstrap-vue table with :filter-included-fields not working

vue.js

bootstrap-vue