之前用于手机闪屏问题 解决 用了v-cloak 指令 放在 v-if 和v-for上
代码如图
<el-tabs type="border-card" @tab-click="tabsClick">
<el-tab-pane :label="o" v-for='o in labels' :key="o">
<template>
<div class="table_container">
<el-scrollbar style="height:100%;">
<el-table :data="tableData" :empty-text="emptyText" @row-click="showDetail">
<el-table-column prop="title" label="流程类型" min-width="30" align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="reason" label="相关内容" min-width="40" align="left" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="create_name" label="申请人" min-width="40" align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="create_date" label="申请日期" min-width="40" align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="status" label="流程类型" min-width="40" align="center" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span style="color:#8dd225;" v-if="scope.row.status == 3">已审核</span>
<span style="color:#e4b121;" v-if="scope.row.status == 2">审批中</span>
<span style="color:#f36c6c;" v-if="scope.row.status == 1">驳回</span>
<span style="color:#30d7e6;" v-if="scope.row.status == 0">草稿</span>
</template>
</el-table-column>
</el-table>
</el-scrollbar>
</div>
</template>
</el-tab-pane>
</el-tabs>
同理 用 v-cloak 无用 只能另寻了 利用v-if 匹配
<el-tabs type="border-card" v-model="active" @tab-click="tabsClick">
<el-tab-pane :label="o" v-for='(o,index) in labels' :key="index" :name="o">
<template>
<div class="table_container" v-if='active == o'>
<el-scrollbar style="height:100%;">
<el-table :data="tableData" :empty-text="emptyText" @row-click="showDetail">
<el-table-column prop="typeName" label="流程类型" min-width="30" align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="reason" label="相关内容" min-width="40" align="left" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="employeeName" label="申请人" min-width="40" align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="createDate" label="申请日期" min-width="40" align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="status" label="状态" min-width="40" align="center" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span style="color:#8dd225;" v-if="scope.row.status == 3">已审核</span>
<span style="color:#e4b121;" v-if="scope.row.status == 2">审批中</span>
<span style="color:#f36c6c;" v-if="scope.row.status == 1">驳回</span>
<span style="color:#30d7e6;" v-if="scope.row.status == 0">草稿</span>
</template>
</el-table-column>
</el-table>
</el-scrollbar>
</div>
</template>
</el-tab-pane>
</el-tabs>
闪屏消失了 |