带有:filter的启动vue表包含的字段不起作用



如果im过滤字段'created_by'filter-included-fields工作,但如果im过滤'memberinfo.age'filter-included-fields不工作,则我需要在引导程序vue表中提供帮助

表代码:

<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 938nNorth 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 HighwaynKubport, 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. 702nKrajcikton, 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 853nStreichberg, 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 816nStrackeside, VA 61128-8080",
"age":27,
"gender":"Male"
}
}
]

filter-include-fieldsfilter-ignored-fields道具仅适用于顶级属性,如文档中所述

你必须编写一个自定义的过滤函数,才能完成你想要做的事情

只需使用成员信息对象

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

最新更新