vue + element ui中tabs页面组件切换数据更新
开发中遇到了一个问题就是我使用element ui中的tabs组件时候,每一个tab内嵌套了一个组件页面,但是我发现当切换之后,生命周期都没有走,页面的方法也没有触发5个tabs 中放了5个页面组件,第一次进来后,5个组件内的接口都全部请求了,点击切换tab将不再触发接口解决方法就是可以采用 tabs的name和每一个组件的隐藏状态同名,并且每一个组件的隐藏状态值都是tabsArr里面的值,并且放
·
vue + element ui中tabs页面组件切换数据更新
开发中遇到了一个问题就是我使用element ui中的tabs组件时候,每一个tab内嵌套了一个组件页面,但是我发现当切换之后,生命周期都没有走,页面的方法也没有触发
5个tabs 中放了5个页面组件,第一次进来后,5个组件内的接口都全部请求了,点击切换tab将不再触发接口
解决方法就是
可以采用 tabs的name和每一个组件的隐藏状态同名,并且每一个组件的隐藏状态值都是tabsArr里面的值,并且放在tabsArr里面
当切换之后 对应handleClick方法会判断当前点击的页面name和tabsArr对象里面哪一个属性名相同,如果相同就改为true,反之其他的隐藏状态改为false
<template>
<div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="1" name="first">
<Legalpay
caption="充币数据管理"
v-if="tabsArr.first"
/>
</el-tab-pane>
<el-tab-pane label="2" name="second">
<Legalpay
caption="提币数据管理"
v-if="tabsArr.second"
/>
</el-tab-pane>
<el-tab-pane label="3" name="third">
<Legalpay
caption="法币充值数据管理"
v-if="tabsArr.third"
/>
</el-tab-pane>
<el-tab-pane label="4" name="fourth">
<Legalpay
caption="法币提现数据管理"
v-if="tabsArr.fourth"
/>
</el-tab-pane>
<el-tab-pane label="5" name="fifth">
<Legalpay
caption="国际电汇数据管理"
v-if="tabsArr.fifth"
/>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import Legalpay from './Statisticspage'
export default {
components: { Legalpay },
data() {
return {
activeName: "first",
tabsArr: {
first: true,
second: false,
third: false,
fourth: false,
fifth: false
},
};
},
methods: {
tabs的切换点击方法 tab中的name是当前点击选中的那一项的name的值
handleClick(tab) {
for (var key in this.tabsArr) {
if (tab.name != key) {
this.tabsArr[key] = false;
} else {
this.tabsArr[key] = true;
}
}
},
},
created() {},
};
</script>
按照原文链接方法改的,可行。
原文链接:https://blog.csdn.net/qq_42628504/article/details/121324815
更多推荐
已为社区贡献1条内容
所有评论(0)