tab选项卡的过滤筛选效果

类似tab选项卡的过滤筛选效果

如：有三个tab，每一个tab中的内容块，但是它们的内容块样式都是相同的，我需要点击每个tab的时候，把它们对应的内容展示出来。
怎么做呢？

做一个选项卡的效果，再筛选遍历

<view class="tablist" @click="chageTab(1)" :class='{active:thisActive==1}'>我的待办({
    {num}})view>
<view class="tablist" @click="chageTab(2)" :class='{active:thisActive==2}'>我的已办view>
<view class="tablist" @click="chageTab(3)" :class='{active:thisActive==3}'>我发起的view>
<view class="tabview">
 <view class="syjb-list" v-for="(item,index) in result" :key="index">
        <view class="syjb-list-title">
            <text>{
    {item.tabOrderno}}text>
        view>
        <view class="syjb-list-total">
            <text>数字：text>
            <text>{
    {iem.num}}text>
        view>
    view>
view>
<script>
export default {
      
        name: "index",
        data(){
      
            return{
      
                thisActive:1,
                tabData:[
                {
      tabGroup: 2,tabOrderno: 2,num:49299,tabOrderno:'甜甜的耶啵'},
                {
      tabGroup: 2,tabOrderno: 1,num:12139,tabOrderno:'酷盖呀'},
                {
      tabGroup: 2,tabOrderno: 3,num:78955,tabOrderno:'不愧是我'},
                {
      tabGroup: 3,tabOrderno: 1,num:44815,tabOrderno:'你不懂'},
                {
      tabGroup: 3,tabOrderno: 3,num:37755,tabOrderno:'摸头杀'},
                {
      tabGroup: 3,tabOrderno: 2,num:49298,tabOrderno:'摩头车'},
                {
      tabGroup: 1,tabOrderno: 2,num:38532,tabOrderno:'继续爱你'},
                {
      tabGroup: 1,tabOrderno: 1,num:37545,tabOrderno:'陪你到世界之巅'},
                {
      tabGroup: 1,tabOrderno: 3,num:76675,tabOrderno:'百香果真好喝'},
                ],
                result:[],
                val:''
            }
        },
        methods:{
      
            chageTab(val){
      
                this.thisActive=val;
                //filter这是过滤tabGroup(是哪个tab的)，jsonSort是进行排序(tabOrderno)
                this.result = this.jsonSort(this.tabData.filter(item => 					item.tabGroup == val));
            },
            // 排序方法
			jsonSort(array, field, reverse) {
      
				if (array.length < 2 || !field || typeof array[0] !== 'object') return array
				if (typeof array[0][field] === 'number') {
      
					array.sort(function(x, y) {
      
						return x[field] - y[field]
					})
				}
				if (typeof array[0][field] === 'string') {
      
					array.sort(function(x, y) {
      
						return x[field].localeCompare(y[field])
					})
				}
				if (reverse) {
      
					array.reverse()
				}
				return array
			},
        }
script>
//这里的数据是我模拟的，到时候可以根据接口传过来的数据来查找具体的需要数据

这个就是主要的代码块了，哈哈，样式就根据自己的需要来写吧，这里就不写了。