使用Iview的Tabs标签动态创建，除第一页外其他页的样式会被修改

最新推荐文章于 2024-03-09 11:23:42 发布

zhaoqian19921029

最新推荐文章于 2024-03-09 11:23:42 发布

阅读量2.5k

点赞数

本文链接：https://blog.csdn.net/zhaoqian19921029/article/details/99654444

版权

导致这个原因主要是animated属性是为true了，把animated设置为false不要动态加载，就好了

<div>

<span>平台接口信息</span>

</div>

<Form-item prop="interfaceName" label="接口名称:">

</Form-item>

<Form-item label="路径(path):" prop="interfacePath">

</Form-item>

<Form-item label="状态:" prop="status">

<Option v-for="item in statusOptionAdd" :value="item.CODE" :key="item.CODE">{{ item.VALUE }}</Option>

</Select>

</Form-item>

<Form-item label="是否缓存:" prop="useCache">

<Option v-for="item in useCacheOptionAdd" :value="item.CODE" :key="item.CODE">{{ item.VALUE }}</Option>

</Select>

</Form-item>

</Form>

</div>

</FormItem>

<Option v-for="item in timeTypeOption" :value="item.code" :key="item.code" style="width:196px">{{ item.codeValue }}</Option>

</Select>

</div>

<Form-item label="缓存配置方式:" prop="mode">

<Option v-for="item in modeOption" :value="item.CODE" :key="item.CODE">{{ item.VALUE }}</Option>

</Select>

</Form-item>

<Form-item label="缓存标记:" prop="cache" v-show="interfaceData.mode === 0">

</Option>

</Select>

<p>数据缓存的标准，比如当success字段返回值为true时需缓存该接口数据</p>

</div>

</Tooltip>

</Form-item>

<Form-item label="剔除字段:" prop="chackCache" v-show="interfaceData.mode === 0">

</Option>

</Select>

<p>返回的字段中需要剔除不需要缓存下来的字段，比如对缓存无意义的动态字段</p>

</div>

</Tooltip>

</Form-item>

</FormItem>

</div>

</Form>

</div>

<span>对应供应商接口</span>

</div>

</template>

<Option v-for="item in listInterfaceData" :value="item.interfaceId" :key="item.interfaceId">{{ item.interfaceName }}</Option>

</Select>

</template>

<div>

</div>

</template>

</List>

</div>

<div>

</div>

<span class="xiaoxi-requst-header-sub-sub">{{ "请求消息转换:" }}</span>

</li>

<li>

</RadioGroup>

</li>

<li><span>（业务方调用本平台接口的消息数据转换）</span></li>

</ul>

<div>

<li>

<div>

</div>

</li>

</ul>

<li>

<Form-item prop="inParamSou" :label-width="1" style="margin-bottom: 0px;">

</Form-item>

</li>

</li>

<li>

<Form-item prop="inParamOut" :label-width="1">

</Form-item>

</li>

</ul>

</div>

<span class="xiaoxi-requst-header-sub-sub">{{ "响应消息转换:" }}</span>

</li>

<li>

</RadioGroup>

</li>

<li><span>（供应商返回本平台接口的消息数据转换）</span></li>

</ul>

<div>

<li style="width:460px">{{ "数据转换模板" }}</li>

<li>

</li>

</ul>

<li>

<Form-item prop="outParamSou" :label-width="1">

</Form-item>

</li>

</li>

<li>

<Form-item prop="outParamOut" :label-width="1">

</Form-item>

</li>

</ul>

</div>

<div>

<div>

</div>

<div>

<Button @click="openExmle" type="base" size="small" style="margin-right: 10px;">显示示例代码</Button>

</div>

</li>

<li>

</RadioGroup>

</li>

<li><span>（对业务方调用本平台接口的消息进行加密）</span></li>

</ul>

<div>

<li>

<Option v-for="item in encryptTemplateOption" :value="item.id" :key="item.id">{{ item.templateName }}</Option>

</Select>

<span>{{ "（算法模板是系统内置的算法，可选择模板后在模板的基础上根据实际需要进行修改，也可不使用模板）" }}</span>

</div>

<div>

</div>

</li>

</ul>

<li>

<Form-item prop="encryptRequest" :label-width="1">

<Input type="textarea" v-model="resultList[tab - 2].encryptRequest" placeholder="//请实现以下接口

public interface xxxx{

}" :rows="6" style="width:1062px" />

</Form-item>

</li>

</ul>

</div>

</li>

<li>

</RadioGroup>

</li>

<li><span>（对供应商返回本平台接口的消息进行解密）</span></li>

</ul>

<div>

<li>

<Option v-for="item in decryptTemplateOption" :value="item.id" :key="item.id">{{ item.templateName }}</Option>

</Select>

<span>{{ "（算法模板是系统内置的算法，可选择模板后在模板的基础上根据实际需要进行修改，也可不使用模板）" }}</span>

</div>

<div>

</div>

</li>

</ul>

<li>

<Form-item prop="encryptRequest" :label-width="1">

<Input type="textarea" v-model="resultList[tab - 2].decryptResponse" placeholder="//请实现以下接口

public interface xxxx{

}" :rows="6" style="width:1062px" />

</Form-item>

</li>

</ul>

</div>

</Form>

</div>

</TabPane>

</Tabs>

zhaoqian19921029

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用Iview的Tabs标签动态创建，除第一页外其他页的样式会被修改

导致这个原因主要是animated属性是为true了，把animated设置为false不要动态加载，就好了<Tabs type="card" :animated="1 !== 1"><TabPane v-for="tab in tabs" :key="tab" :label="headers[tab - 1]"><div v-show="tab === ...
复制链接

扫一扫