鍍金池/ 問答/HTML/ vue element tab切換兩個(gè)表格，第一次點(diǎn)切換進(jìn)來，表格渲染會(huì)閃一下，

vue element tab切換兩個(gè)表格，第一次點(diǎn)切換進(jìn)來，表格渲染會(huì)閃一下，這是什么原因？

vue element tab切換兩個(gè)表格，第一次點(diǎn)切換進(jìn)來，表格渲染會(huì)閃一下

      <el-tabs v-model="activeName">
            <el-tab-pane label="實(shí)物" name="first">
                <!--實(shí)物表格-->
                <el-table :data="tableData1" border style="width: 100%"  ref="multipleTable" @selection-change="handleSelectionChange">
                    <el-table-column prop="ordergoods" label="活動(dòng)訂單商品" align="center"></el-table-column>
                    <el-table-column prop="consignee" label="收貨人信息"></el-table-column>
                    <el-table-column prop="buyeraccount" label="下單人賬號(hào)" width="150" align="center"></el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="虛擬" name="second">
                <!--虛擬表格-->
                <el-table :data="tableData2" border style="width: 100%" ref="multipleTable" >
                    <el-table-column prop="virtualOrderGoods" label="活動(dòng)訂單商品" align="center"></el-table-column>
                    <el-table-column prop="activationCode" label="激活碼" align="center"></el-table-column>
                    <el-table-column prop="validityTerm" label="有效期" align="center"></el-table-column>
                    <el-table-column prop="buyerAccount" label="下單人賬號(hào)" align="center"></el-table-column>
                    <el-table-column prop="state" label="狀態(tài)" align="center"></el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>

之后再點(diǎn)擊切換就是正常的，刷新頁面第一次進(jìn)來的時(shí)候會(huì)閃

回答
編輯回答
還吻

你用的element-ui 是哪個(gè)版本的

2018年4月3日 07:03
編輯回答
初念

使用v-if控制el-tab-pane里的內(nèi)容是可以的，親測有效
例如v-if="activeName === 'second'"
例子詳見
https://jsfiddle.net/athena03...

2018年1月12日 10:31
編輯回答
你的瞳

因?yàn)殇秩緮?shù)據(jù)不及時(shí)，數(shù)據(jù)加載因網(wǎng)絡(luò)還沒有加載，加載完成后就會(huì)跳，這是VUE的特性，給盒子加上v-cloak，這是防止 閃爍

2018年2月17日 15:31
編輯回答
朕略傻

處理方法兩個(gè)：
1、v-cloak配合css來使用
2、用template標(biāo)簽包裹tabs的代碼

2018年7月2日 09:01