关于element tab标签切换加载闪一下的问题

最新推荐文章于 2024-08-30 09:20:38 发布

Finger worker

最新推荐文章于 2024-08-30 09:20:38 发布

阅读量5.4k

点赞数 6

分类专栏： element日常

本文链接：https://blog.csdn.net/YanYanzcg/article/details/84792416

版权

element日常专栏收录该内容

3 篇文章 0 订阅

订阅专栏

之前开发就遇到过这个问题，当时解决了也没记录下来，今天来说下这个问题！！！

解决之前的代码如下：

<el-tabs v-model="activeName2" type="card">
            <el-tab-pane label="项目基本信息" name="first">
                <template>
                    <el-row class="msgSty"> 
                        <el-col :span="12">
                            <div class="grid-content bg-purple">
                                <p>项目业务编号</p>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content bg-purple">
                                <a href="javascript:void(0)">piupiu</a>
                            </div>
                        </el-col>
                    </el-row>
                </template>
            </el-tab-pane>
            <el-tab-pane label="项目标包划分" name="second">                      
                <template>
                    <div class="tableBox">
                        <el-table
                            :data="tableData"
                            style="width: 100%"
                            >
                            <el-table-column prop="idNum" label="序号"></el-table-column>
                            <el-table-column prop="proNum" label="标包业务编号"></el-table-column>
                            <el-table-column prop="proName" label="标包名称"></el-table-column>
                            <el-table-column prop="bagType" label="标包内容分类"></el-table-column>
                            <el-table-column prop="yesOrNo" label="是否参与"></el-table-column>
                            <el-table-column prop="mode" label="招标方式"></el-table-column>
                        </el-table>
                    </div>
                </template>
            </el-tab-pane>
        </el-tabs>

因为我这里是作为公共组件，而且调用都是插在 dialog里的，切换tab很明显的能看到table样式会有闪一下的情况，正常页面用的话是没有这一问题的，我说的只是我的，你的还得你自己亲测！言归正传，怎么解决呢？其实很简单，就是用v-if指令来控制它！往哪加，请看下面代码：

<el-tabs v-model="activeName2" type="card">
            <el-tab-pane label="项目基本信息" name="first">
                <template>
                    <el-row class="msgSty"> 
                        <el-col :span="12">
                            <div class="grid-content bg-purple">
                                <p class="overflowText">招标项目业务编号：</p>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content bg-purple">
                               <a href="javascript:void(0)">piupiu</a>
                            </div>
                        </el-col>
                    </el-row>
                </template>
            </el-tab-pane>
            <el-tab-pane label="项目标包划分" name="second">                      
                <template>
                    <div class="tableBox">
                        <el-table
                            v-if="activeName2 === 'second'"
                            :data="tableData"
                            style="width: 100%"
                            >
                            <el-table-column prop="idNum" label="序号"></el-table-column>
                            <el-table-column prop="proNum" label="标包业务编号"></el-table-column>
                            <el-table-column prop="proName" label="标包名称"></el-table-column>
                            <el-table-column prop="bagType" label="标包内容分类"></el-table-column>
                            <el-table-column prop="yesOrNo" label="是否参与"></el-table-column>
                            <el-table-column prop="mode" label="招标方式"></el-table-column>
                        </el-table>
                    </div>
                </template>
            </el-tab-pane>
        </el-tabs>

此时此刻，问题就解决了！如果你有更好的方式可以评论交流哦！