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

敬请收藏地址：https://www.wuflower.cn

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

话不多说,直接开始吧！

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

2.效果：

  

3.上菜：

<?php

//三个dataProvider,三个SearchModel
$dataProviderXXX1->setSort(false);
$dataProviderXXX1->pagination->defaultPageSize = 10;
$dataProviderXXX2->setSort(false);
$dataProviderXXX2->pagination->defaultPageSize = 10;
$dataProviderXXX3->setSort(false);
$dataProviderXXX3->pagination->defaultPageSize = 10;

?>



<!--Tabs Start-->
<?php
echo \yii\bootstrap\Tabs::widget([
    'id' => '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,
        ]
    ]
]) ?>

<!--Tabs List Start-->
<div class="tab-content">

    <!--XXX1-->
    <div class="tab-pane active" id="tab_XXX1">

        //XXX1搜索表单
        <div class="row">
            <?php echo $this->render('_search', ['model' => $searchModelXXX1]); ?>
        </div>

        //XXX1列表
        <?= GridView::widget([
            'dataProvider' => $dataProviderXXX1,
            'columns' => [

                //XXXX1列表....

            ]   
        ]); ?>
    </div>

    <!--XXX2-->
    <div class="tab-pane" id="tab_XXX2">
        
        //XXX2搜索
        <div class="row">
            <?php echo $this->render('_XXX2-search', ['model' => $searchModelXXX2]); ?>
        </div>
        
        //XXX2列表
        <?= GridView::widget([
            'dataProvider' => $dataProviderXXX2,
            'columns' => [
                
                //XXX2列表.....

            ]
        ]); ?>
    </div>

    <!--XXX3-->
    <div class="tab-pane" id="tab_XXX3">
        
        //XXX3搜索表单
        <div class="row">
            <?php echo $this->render('_XXX3-search', ['model' => $searchModelXXX3]); ?>
        </div>

        //XXX3列表
        <?= GridView::widget([
            'dataProvider' => $dataProviderXXX3,
            'columns' => [
                
                //XXX3列表
    
            ]
        ]); ?>
    </div>

</div>
<!--Tabs List End-->
<!--Tabs End-->

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