Yii2使用Tabs标签（选项卡）实现切换

使用Yii2相信有遇到过做Tab标签（选项卡）的，昨天翻了半天Yii2官网、各种教程、指导，结果，越看越懵，各种帖子也只是照搬来了一下官网，曹操有言可喻：‘鸡肋’，没有喷别人帖子的意思，不要打我~~~~

话不多说,直接开始吧！

1.业务场景：一个页面同时展示不同列表及搜索表单、分页信息，并且Tab标签需要显示每个列表总数

2.效果：

  

3.上菜：

setSort(false);
$dataProviderXXX1->pagination->defaultPageSize = 10;
$dataProviderXXX2->setSort(false);
$dataProviderXXX2->pagination->defaultPageSize = 10;
$dataProviderXXX3->setSort(false);
$dataProviderXXX3->pagination->defaultPageSize = 10;

?>




 'tabs',
    'renderTabContent' => false,
    'linkOptions' => ['data-toggle' => "tab"],
    'items' => [
        [
            'label' => Yii::t('app', 'XXX1('.$dataProviderAll->totalCount.')'),
            'content' => '',
            'headerOptions' => ["id" => 'li_all'],
            'url' => '#tab_all',
            'active' => true,
        ],
        [
            'label' => Yii::t('app', 'XXX2('.$dataProviderWait->totalCount.')'),
            'content' => '',
            'headerOptions' => ["id" => 'li_wait'],
            'url' => '#tab_wait',
            'active' => false,
        ],
        [
            'label' => Yii::t('app', 'XXX3('.$dataProviderAuth->totalCount.')'),
            'content' => '',
            'headerOptions' => ["id" => 'li_auth'],
            'url' => '#tab_auth',
            'active' => false,
        ]
    ]
]) ?>




    
    


        //XXX1搜索表单
        

            render('_search', ['model' => $searchModelXXX1]); ?>
        

        //XXX1列表
         $dataProviderXXX1,
            'columns' => [

                //XXXX1列表....

            ]   
        ]); ?>
    

    
    

        
        //XXX2搜索
        

            render('_XXX2-search', ['model' => $searchModelXXX2]); ?>
        
        
        //XXX2列表
         $dataProviderXXX2,
            'columns' => [
                
                //XXX2列表.....

            ]
        ]); ?>
    

    
    

        
        //XXX3搜索表单
        

            render('_XXX3-search', ['model' => $searchModelXXX3]); ?>
        

        //XXX3列表
         $dataProviderXXX3,
            'columns' => [
                
                //XXX3列表
    
            ]
        ]); ?>
    

4.XXX1,XXX2,XXX3的地方名称一致即可，Tabs标签可随意增加

5.参考链接：http://www.yii-china.com/post/detail/352.html