今天再用element-ui的el-tab调用不同的组件时遇到一个奇怪的问题,
上述图片中,一个组件被重复渲染了多次,代码如下:
<el-tabs ref="tabRef" v-model="activeName" @tab-click="handleClick">
<el-tab-pane
v-for="item in options.tabs"
:key="item.name"
:label="item.label"
:name="item.name"
>
<!-- <keep-alive>
<div :is="item.name"></div>
</keep-alive> -->
<QualificationDetail v-if="activeName == 'QualificationDetail'" :isEdit="item.isEdit" />
<WarehousingDetail v-if="activeName == 'WarehousingDetail'" />
<AuditProcess v-if="activeName == 'AuditProcess'" />
<SampleRegist v-if="activeName == 'SampleRegist'"></SampleRegist>
<SampleRegistDetail v-if="activeName == 'SampleRegistDetail'"></SampleRegistDetail>
<InspectRegist v-if="activeName == 'InspectRegist'" v-on="$listeners"></InspectRegist>
<InspectRegistDetail v-if="activeName == 'InspectRegistDetail'"></InspectRegistDetail>
<InspectReview v-if="activeName == 'InspectReview'" :isEdit="item.isEdit"></InspectReview>
</el-tab-pane>
</el-tabs>
虽然上述代码没有问题,没有报错,但是这样明显是不对的,查询了下,然后做了改正:
<el-tabs ref="tabRef" v-model="activeName" @tab-click="handleClick">
<el-tab-pane
v-for="item in options.tabs"
:key="item.name"
:label="item.label"
:name="item.name"
>
<keep-alive>
<div :is="item.name"></div>
</keep-alive>
</el-tab-pane>
</el-tabs>
这样DOM树渲染就正常了,
原因是:使用v-if会本身就会造成多次渲染
看了下官网解释的很好,给出的例子也很好:https://cn.vuejs.org/v2/guide/components-dynamic-async.html