vue+element开发中tabs只加载该标签页下的数据,动态加载其他tab下的数据
实现要求:打开当前界面时,只加载当前标签页数据组件内容,而不是默认的将所有标签页都加载完毕,而是在切换标签页时候,加载数据。方法:添加v-if判断,在当前标签页时,就将其对应的isShow设为true<el-tabs v-model="activeName" @tab-click="handleClick"><el-tab-pane v-if="isShow" name="que
·
实现要求:
- 打开当前界面时,只加载当前标签页数据组件内容,而不是默认的将所有标签页都加载完毕,而是在切换标签页时候,加载数据。
方法:添加v-if判断,在当前标签页时,就将其对应的isShow
设为true
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane v-if="isShow" name="queryFeature">xxx</el-tab-pane>
<el-tab-pane v-if="isShow2" name="dataFeature">xxx</el-tab-pane>
</el-tabs>
具体操作如下:
- 定义所需的数据
data(){
return{
isShow:true,//默认值,默认显示第一个tab
isShow2:false,//默认值
}
}
- 实现具体的方法
function handleClick(tab){
if(tab.name === queryFeature){
this.isShow = true;
this.isShow2 = false;
}else{
this.isShow = false;
this.isShow2 = true;
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)