如何在primevue中添加跳转到活动选项卡的按钮

Question

<template>
  <div>
    <Button  @click="jumpToActiveTab">Jump to Active Tab</Button> 
    <TabView :scrollable="true" previousIcon: { class: 'text-indigo-900 w-8'}>
      <TabPanel v-for="(a, index) in filteredTabledata" :key="index">
        <template #header>
          <span :class=
            "[index == activeIndexVal ? 'text-white font-black' : 'text-white font- medium']"
            @click="getDataId(a['_id'], a['Status'])">{{a.Account_id }}
          </span>
        </template>
     </TabView>
   </div>
  </template>

  
 import TabPanel from 'primevue/tabpanel';
 import TabView from 'primevue/tabview';
 export default {
   components: {
     TabView,
     TabPanel
   },
   data() {
     tabledata: [],
   },
   computed:{
     filteredTabledata() {
       return this.tabledata.filter(item => String(item.Account_id).startsWith(this.searchQuery));
     }
   },
   methods:{
     getData(){
       axios.get('url').then({
         this.tableData = res.data
       })
     },
     jumpToActiveTab(){
       console.log('jump to active tab')
    }
   }
  </script>

我使用primevue tabview，我想在跳转到活动选项卡按钮中实现登录。 如果用户单击该按钮，它应该将用户带到活动标签页 如果用户位于最后一页，但活动选项卡位于第一页，则意味着单击后必须移动到第一页，而无需使用上一页或下一页按钮导航。

Answer 1

请参阅 PrimeVue 文档

如果你学过Vue，不到2分钟就可以搞定。

<TabView v-model:active-index='targetIndex'>

然后将

targetIndex

添加到

data()

。

现在

this.targetIndex

是活动选项卡的索引。它是反应性的，因此设置

this.targetIndex

将更改 UI。你可以做到的。