使用antdv中的a-tab,之后第一次切换会发送请求,之后不会再去发送请求

之前未作处理的时候,只有第一次切换tab才会发送请求,之后的由于有缓存,所以不会重新发送请求,需要使用callback来解决

在a-tabs标签中添加@change="callback"

<a-tabs v-model="xxx" @change="callback">

在method中添加callback函数

callback(key) {
    if (key == 1) {
        xxxxx
    } else if (key == 2) {
        this.$nextTick(()=>{
            xxxxx
        })
    }
},

其中使用this.$nextTick是为了在页面渲染结束的之后再调用nextTick方法,防止报“xxx未定义”的错误

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现这个功能,你需要做以下几件事: 1. 定义一个变量,用于保存当前选tab索引。 2. 在`mounted()`钩子,判断是否存在上次请求数据,如果存在,则将数据渲染到对应的tab。 3. 监听tab切换事件,当tab切换时,更新当前选tab索引,并根据索引值重新发送请求获取数据。 下面是一个示例代码: ```html <template> <el-table :data="tableData"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="gender" label="Gender"></el-table-column> </el-table> </template> <script> export default { data() { return { activeTab: 0, tableData: null, requestData: [ { name: 'John', age: 28, gender: 'Male' }, { name: 'Jane', age: 23, gender: 'Female' } ] } }, mounted() { if (this.requestData[this.activeTab]) { this.tableData = this.requestData[this.activeTab] } }, methods: { handleTabClick(index) { this.activeTab = index if (this.requestData[this.activeTab]) { this.tableData = this.requestData[this.activeTab] } else { // 发送请求获取数据 axios.get('/api/data', { params: { tab: index } }).then(res => { // 将数据保存到requestData this.requestData[index] = res.data // 将数据渲染到对应的tab this.tableData = res.data }) } } } } </script> ``` 在这个示例代码,我们使用了一个数组`requestData`来保存每个tab请求数据,如果该tab之前已经请求数据,则直接从数组取出数据渲染即可,否则重新发送请求获取数据,并将数据保存到数组,以便下次使用

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值