vue项目打包后卡死
element使用el-tabs导致浏览器卡死使用ElementUi开发后台本地是好的,打包后有一个页面打开就卡死浏览器,经排查发现在是由于引起的。将vue、vue-template-compiler element-ui升级,发现问题还是存在。"vue": "^2.6.10","element-ui": "^2.13.2","vue-template-compiler": "^2.6.10",经
·
element使用el-tabs导致浏览器卡死
使用ElementUi开发后台本地是好的,打包后有一个页面打开就卡死浏览器,经排查发现在是由于引起的。
将vue、vue-template-compiler element-ui升级,发现问题还是存在。
"vue": "^2.6.10",
"element-ui": "^2.13.2",
"vue-template-compiler": "^2.6.10",
经过不断尝试推荐两种解决方案
解决方案1:修改的最外层元素的css样式,加上display和display-direction样式属性
<div class="t-search-content">
<template>
<el-tabs v-model="activeName" @tab-click="activehandleClick">
<el-tab-pane label="订单信息" name="first">
<viewOrder ref="view-order"></viewOrder>
</el-tab-pane>
<el-tab-pane label="运营信息" name="second">
<viewOperators ref="view-operators"></viewOperators>
</el-tab-pane>
<el-tab-pane label="门店信息" name="third">
<viewShop ref="view-shop"></viewShop>
</el-tab-pane>
<el-tab-pane label="结算信息" name="fourth">结算信息</el-tab-pane>
</el-tabs>
</template>
<style scoped lang="scss">
.lt-search-content{
width:100%;
height:100%;
/*加上display和display-direction样式属性就可以解决页面卡死问题*/
display:flex;
flex-direction:column;
}
解决方案2:使用el-row el-col元素来包裹el-tabs元素,也可以解决页面卡死问题
<tempalte>
<div class="log-box">
<el-row>
<el-col :span="24">
<el-tabs v-model="activeName" @tab-click="activehandleClick">
<el-tab-pane label="订单信息" name="first">
<viewOrder ref="view-order"></viewOrder>
</el-tab-pane>
<el-tab-pane label="运营信息" name="second">
<viewOperators ref="view-operators"></viewOperators>
</el-tab-pane>
<el-tab-pane label="门店信息" name="third">
<viewShop ref="view-shop"></viewShop>
</el-tab-pane>
<el-tab-pane label="结算信息" name="fourth">结算信息</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
<div>
</template>
更多推荐
已为社区贡献1条内容
所有评论(0)