html
<van-tabs @click="onClick" v-model="active">
<van-tab v-for="(tabItem,index) in tabTitle" :title="tabItem.title">
<div v-if="tabItem.value === 0 || tabItem.value === 1 || tabItem.value === 2">
<van-cell-group v-for="(item,index) in newData">
{{item.name}}
</van-cell-group>
</div>
</van-tab>
</van-tabs>
data数据
//tab切换数据
tabTitle: [
{title: '1', value: 0},
{title: '2', value: 1},
{title: '3', value: 2},
],
active: 0,
thisTitle: '',
data: [
{
type: '1',
meal: [
{id: '1',name: '1',},
]
},
],
newData: [],
函数
created() {//初始化tab选中名、第一页tab数据
this.thisTitle = this.tabTitle[0].title;
this.newData = this.data.filter(function (v) {
return v.type === '1'
})
},
methods: {
onClick(name, title) {//切换tab
if (name === 0) {
this.matchMeal(this.data, '早餐');
return false;
} else if (name === 1) {
this.matchMeal(this.data, '午餐');
return false;
} else if (name === 2) {
this.matchMeal(this.data, '晚餐');
return false;
}
this.thisTitle = title;
},
matchMeal(oArr, variable = '') {//过滤数据
this.newData = oArr.filter((item) => {
if (item.type === variable) {
return item
}
})
},
}